Ionic 4 Slider autoplay

Question

Je veux faire glisser automatiquement le curseur ionic mais ça ne fonctionne pas. le curseur contient aussi des images. les données sont obtenues de l'appel de l'API.

                     {{item.title}} 
                    {{item.summary}}

Answer 1

Essayez ceci pourrait fonctionner dans votre application :

settings the options autoplay to true

slideOptsOne = {
 initialSlide: 0,
 slidesPerView: 1,
 autoplay:true
};

page.html

        {{item.title}} 
       {{item.summary}}

Ajoutez votre configuration dans options dans le fichier page.ts. Faites-moi savoir si cela fonctionne ou non.

Answer 2

Ne pas utiliser ion-img. Il affiche une image brisée pour les diapositives suivantes la première fois. Utilisez comme indiqué ci-dessous.

Note: L'équipe Ionic a développé ion-img pour ion-virtual-scroll.

.ts

 import { IonSlides } from '@ionic/angular';

  slideOptions = {
    initialSlide: 1,
    speed: 400,
  };

  constructor() { }

  slidesDidLoad(slides: IonSlides) {
    slides.startAutoplay();
  }

.html

Answer 3

Je suppose que vous avez rencontré une condition de course. Peut-être que l'élément a été rendu avant que les données (topStories) ne soient prêtes. Dans ce cas, il n'y a pas de diapositive à "autoplay".

Essayez de mettre un *ngIf à l'élément pour rendre l'élément quand les données sont prêtes. Par exemple :

this.data_loaded = false;
...

this.apiGetData().then((data) => {
    ...
    this.data_loaded = true;
});

######################################

...

Answer 4

afterslidesLoad(slides) {
  slides.startAutoplay();
}

Le code ci-dessus est mon code de travail. Vous devez implémenter la méthode startAutoPlay.

Answer 5

Utilisez la propriété d'entrée [autoplay]="3000" pour passer en millisecondes :

      Slide 1

      Slide 2

      Slide 3