ionic-framework: [RC5] autoplay property on Slider not working with async data

Hello, Sorry for my English , I found a solution, I know it is not the best but good …

<ion-slides *ngIf=“events” autoplay=“5000” loop=“true”>

<ion-slide *ngFor="let event of events" >
  <img src="{{event?.picture}}" />
</ion-slide >

</ion-slides>

this code works for me , i hope for you too

for my work around, I set the autoplay in page instead.:

in mypage.html

    <ion-slides #mySlider initialSlide="0" autoplay="7500" loop="true" pager="true" >
        <ion-slide *ngFor="let s of slides">
            <img [src]="s.img_url" />
        </ion-slide>
    </ion-slides>

in mypage.ts

    this.myData.getData(params).subscribe(data => {
      this.slides = data;
      
      this.mySlider.update();
      setTimeout(() => {
        this.mySlider.autoplay = 2500;
        this.mySlider.startAutoplay();
      }, 500); // need to wait at least 300ms for sliders.update
    });

I found that if you add a *ngIf=“” checking the length of the slide data source it will work with autoplay and the other attributes that cause it to fail. My slides are loaded asynchronously. This is just a workaround until the core issue with the slider are remedied.

<ion-col width-50 *ngIf="slides.length > 1">
    <ion-slides #frSlider initialSlide="0" autoplay="7500" loop="true" pager="true" >
        <ion-slide *ngFor="let s of slides">
            <img [src]="s.slide.$value" />
        </ion-slide>
    </ion-slides>
</ion-col>

This is what i do to autoplay slider with async data.

ionViewDidEnter() {
  ...... //you get slider data from any web service
  this.sliderObservable = Observable.interval(3000).subscribe(x => {
        this.autoPlaySlider();
   });
}
autoPlaySlider(){
    var slider_index = this.slides.getActiveIndex();
    if(slider_index < this.sliderData.length){
        this.slides.slideTo(slider_index+1);
    }
    else{
        this.slides.slideTo(0);
    }
  }
ionViewDidLeave(){
    this.sliderObservable.unsubscribe();
}

@leonardocoutinho Try my solution. It will work.

@rafikhdj you da man!

@mhartington I faced the same issue as @yannbf . I notice when the ion-slide is loaded with async data, an error ( ‘Cannot read property ‘hasAttribute’ of undefined’ ) occured on the input properties like autoplay, loop, etc. When i removed the input properties from ion-slide, it works normal.

<ion-slides [autoplay]="4000" [loop]="true"> <ion-slide *ngFor="let data of slideData"> <img src="{{data.imgPath}}" onerror="src='assets/img/error-image.png'"> </ion-slide> </ion-slides>

Please help solve this issue. Thanks.

@mhartington I noticed the problem is in regards to async data. At first I thought it was just for normal slides, but mine comes from async data. <ion-slide *ngFor="let slide of slides | async"...>.

It was giving the error Cannot read property 'hasAttribute' of undefined because as the slides use async pipe, there are no instances at the moment the page is rendered.

Could you please reopen the issue?

Thanks.