web-dev-qa-db-fra.com

Afficher les points de pager sur le composant ionique des diapositives

J'essaie de créer un composant de curseur dans une page d'une application ionique 2. Je l'ai obtenu pour fonctionner comme prévu à l'exception du fait que les points de pager n'apparaissent pas. La documentation sur l'utilisation du téléavertisseur n'est pas excellente. 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 n'a fonctionné.

Édité: Après inspection dans le navigateur, le pager est affiché avec un conteneur div comme celui-ci: <div class="swiper-pager hide"> Je n'utilise donc certainement pas les bons paramètres pour afficher le pager. Ou il y a un bug. J'utilise Ionic v2.0.0.

iosionic2ion-slides
7
J. Brandes

Enfin, cela a fonctionné avec cela comme balise d'ouverture des diapositives:

<ion-slides [options]="{pagination: true}">
2
J. Brandes

Ce travail pour moi dans Ionic 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>

 Ionic Slides with pagination

5
gts

Vous pouvez essayer d’ajuster votre position de points de pager. 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. 

1
Huiting

Si vous utilisez swiper to slide page, il y a beaucoup de paramètres pour faire la même chose -

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

voici le code de paginatin

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

Le code complet peut avoir un regardez ici .
Nous avons une démonstration du curseur en tant que - http://idangero.us/swiper/demos/#.WUJGrROGNp8
J'espère que cela vous aidera également!

0
S.Yadav