Ionic 4 Slider autoplay

Thilina Ranaweera picture Thilina Ranaweera · Apr 12, 2019 · Viewed 18.7k times · Source

I want to slide automatically the ionic slider but its not working. slider contains images also. data is got from API call.

  <ion-slides  autoplay="5000" loop="true" speed="300" pager="true" >
        <ion-slide *`ngFor`="let item of topStories">
            <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
                <ion-card-content >
                    <ion-img [src] = "item.image"></ion-img>
                    <h2> <b>{{item.title}} </b></h2>
                    <h4>{{item.summary}}</h4>
            </ion-card-content>
            </ion-card>
        </ion-slide>
       </ion-slides>

Answer

Jaydeep Rathod picture Jaydeep Rathod · Apr 12, 2019

Try this might work in your app:

settings the options autoplay to true

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

page.html

<ion-slides [options]="slideOptsOne">
 <ion-slide *`ngFor`="let item of topStories">
   <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
     <ion-card-content>
       <ion-img [src]="item.image"></ion-img>
       <h2> <b>{{item.title}} </b></h2>
       <h4>{{item.summary}}</h4>
     </ion-card-content>
   </ion-card>
 </ion-slide>
</ion-slides>

Add your config in options in the page.ts file. Let me know it's work or not.