Ionic 3 slide not working with autoplay

Question

I am using ionic 3.

Here is my template

 <ion-slides autoplay="5000" loop="true" speed="500" class="slides" pager="true">
      <ion-slide *ngFor="let Image of PImage">
         <img src="{{Image.URL}}" alt="Product Image">
      </ion-slide>
 </ion-slides>

But I am getting this error

TypeError: Cannot read property 'hasAttribute' of undefined

How can I fix this issue?

Kindly advice me,

Thanks

Answer 1

There seems to be an issue when trying to create the slides elements, when the data is not ready yet. To fix it, use an *ngIf to create the slides only when the data is ready:

<ion-slides *ngIf="PImage && PImage.length"  autoplay="5000" loop="true" speed="500" class="slides" pager="true">
      <ion-slide *ngFor="let Image of PImage">
         <img src="{{Image.URL}}" alt="Product Image">
      </ion-slide>
 </ion-slides>

Answer 2

If anyone use Ionic 4, then try this method:

HTML:

  <ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad()" autoplay="5000" loop="true" speed="500" class="slides" pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let adsImages of AdsImages">
      <img src="{{adsImages}}">
    </ion-slide>
  </ion-slides>

TS:

  AdsImages = [
    "../../assets/images/ads-sample.webp",
    "../../assets/images/ads-sample2.webp",
    "../../assets/images/ads-sample3.webp"
  ];

  slideOpts = {
    zoom: false
  };

  @ViewChild("mySlider") slides: IonSlides;

  slidesDidLoad() {
    this.slides.startAutoplay();
  }

SCSS:

ion-slides {
  --bullet-background: #ffffff;
  --bullet-background-active: #b8b8b8;
}

Fore more information: https://ionicframework.com/docs/api/slides