Angular 项目中引入 Swiper,解决 autoplay 不生效的问题
最近在调整一个基于 NG-ZORRO 的项目,坦白讲我对 Angular 的熟练度还有待提升,踩坑是难免的。其中一个比较棘手的状况是:集成 Swiper 后,自动播放(autoplay)的配置始终无法生效。尝试了网上常见的多种安装和引入方式(具体步骤不再赘述,相信大家都能搜到),然而问题依旧——轮播图就是无法自动滚动。
后来抱着试试看的心态翻了一遍 Swiper 官方文档,发现其实官方说明里写得清清楚楚,只是平常容易忽略。关键点就在这里:

基本功能模块的导入方式
import { Swiper, Autoplay } from 'swiper';
Swiper.use([Autoplay]);
export class TestComponent {
swiper: Swiper;
constructor(){}
ngAfterViewInit() {
this.swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
initialSlide :1,
centeredSlides: true,
loop: true,
observer: true,
observeParents: true,
autoplay:{
delay:2000,
disableOnInteraction:false,
stopOnLastSlide: false,
},
});
}
}
问题解决,收工!_(:з」∠)_
