Issue
I have implemented swiper.js in my ionic-angular application following the official docs. But even if i give loop:true, the slides aren't looping. The loop stops in the first slide.
This is my config:
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
speed: 3000,
loop: true,
slidesPerView:1,
effect: 'cube',
grabCursor: true,
autoHeight: false,
}
This is my HTML :
<swiper style="background-color: #121318;" [config]="configRestText">
<ng-template swiperSlide *ngFor="let texts of restText">
<p style="color: white;
font-size: 1rem;">
<ion-icon name="information-circle-outline"></ion-icon>
{{texts}}</p>
</ng-template>
</swiper>
Solution
I use something like this:
TS:
@ViewChild('swiper') swiper: SwiperComponent;
animationInProgress = false;
config = {
slidesPerView: 4,
spaceBetween: 10,
pagination: true,
loop: true,
}
ngOnInit(): void {
this.startAnimation();
}
startAnimation() {
if(this.animationInProgress) return;
this.animationInProgress = true;
setTimeout(() => {
this.swiper.swiperRef.slideNext(2000);
this.animationInProgress = false;
this.startAnimation();
}, 5000);
}
next() {
this.swiper.swiperRef.slideNext(1000);
}
HTML:
<swiper #swiper [config]="config">
<ng-template swiperSlide *ngFor="let item of items">
....
</ng-template>
</swiper>
I followed the IonicAcademy tutorial (here / video here) and read the swiperjs documentation (here).
Answered By - Callan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.