Afficher les points de pagination sur le composant ionique des lames ioniques

Question

J'essaie de créer un composant de curseur à l'intérieur d'une page dans une application ionique 2. Je l'ai obtenu pour fonctionner comme prévu, sauf que les points de pagination n'apparaissent pas. La documentation sur la façon d'utiliser le pager n'est pas géniale. Des idées où je me trompe ici?

<div class="slider-container"> 
      <ion-slides pager="true"> 
       <ion-slide> 
        <div class="slide"> 
         <img src='assets/image/scoping.png' /> 
         <p class="slide-title">TITLE 1</p> 
         <p class="slide-text">Body text 1</p> 
        </div> 
       </ion-slide> 
       <ion-slide> 
        <div class="slide"> 
         <img src='assets/image/projectmgmt.png' /> 
         <p class="slide-title">TITLE 2</p> 
         <p class="slide-text">Body text 2</p> 
        </div> 
       </ion-slide> 
       <ion-slide> 
        <div class="slide"> 
         <img src='assets/image/satisfaction.png' /> 
         <p class="slide-title">TITLE 3</p> 
         <p class="slide-text">Body text 3</p> 
        </div> 
       </ion-slide> 
      </ion-slides> 
    </div> 

J'ai aussi essayé <ion-slides options="{pagination: true}"> et <ion-slides pager="true"> et aucun de ceux-ci ont travaillé.

Modifié: Lors de l'inspection dans le navigateur, je vois le téléavertisseur étant rendu avec un conteneur div comme ceci: <div class="swiper-pager hide"> Je ne suis certainement pas en utilisant les bons paramètres pour réafficher le téléavertisseur. Ou il y a un bug. J'utilise Ionic v2.0.0.

Answer 1

Enfin eu à travailler avec ce que la balise d'ouverture des diapositives:

<ion-slides [options]="{pagination: true}"> 

Answer 2

Vous pouvez essayer d'ajuster votre position des points de pagination. Peut-être qu'il apparaît derrière votre image. Inclure dans votre fichier .scss:

.swiper-container-horizontal > .swiper-pagination 
{ 
    bottom   : 50%; //Change accordingly 
    z-index   : 99 !important; 
} 

J'ai testé votre code (moins l'image), il apparaît sur le mien.

Answer 3

Si vous utilisez swiper glisser la page, il y a beaucoup de paramètres à faire de même AS-

<div class="swiper-pagination"></div> 

ici est le code de paginatin-

var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     spaceBetween: 30, 
    }); 

Code complet peut avoir un look here.
Nous avons une démo de slider as- http://idangero.us/swiper/demos/#.WUJGrROGNp8
J'espère que cela vous aidera aussi!

Answer 4

Ce travail pour moi ionique 3:

<ion-content> 

    <ion-slides pager> 
    <ion-slide> 
     <h1>My Slide 1</h1> 
    </ion-slide> 
    <ion-slide> 
     <h1>My Slide 2</h1> 
    </ion-slide> 
    <ion-slide> 
     <h1>My Slide 3</h1> 
    </ion-slide> 
    </ion-slides> 

</ion-content>