如何在 swiper.js angular 中循环播放幻灯片?
How to loop slides in swiper.js angular?
我已经按照官方文档在我的 ionic-angular 应用程序中实现了 swiper.js。但即使我给出 loop:true,幻灯片也不会循环播放。循环在第一张幻灯片停止。
这是我的配置:
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>
我用的是这样的:
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>
我遵循了 IonicAcademy 教程 (here / video here) and read the swiperjs documentation (here)。
我已经按照官方文档在我的 ionic-angular 应用程序中实现了 swiper.js。但即使我给出 loop:true,幻灯片也不会循环播放。循环在第一张幻灯片停止。
这是我的配置:
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>
我用的是这样的:
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>
我遵循了 IonicAcademy 教程 (here / video here) and read the swiperjs documentation (here)。