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>