Ionic 3 slide not working with autoplay
10,113
Solution 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>
Solution 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
Author by
ANISUNDAR
Updated on June 16, 2022Comments
-
ANISUNDAR almost 2 years
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
-
Mohan Gopi over 6 yearsthanks for the answer i am facing an issue like when at first time when i load the page the slide are autoplaying but when i go the some page and comeback the this same page where slide are there it is not working that time.
-
Kirsten almost 4 yearsman, i've been busting my chops on this for ages! the ngIf solution fixed it for me. thank you