Angular引入swiper后autoplay失效的解决办法
作者:技术拾光时间:2026-06-12 08:23:44浏览:101
angular引入swiper 最近在调整一个基于NG-ZORRO的项目,由于对Angular不够熟悉,遇到了一些常见问题。其中一个比较棘手的问题是:引入Swiper之后,autoplay的配置始终无法生效。尝试了网上多种安装和引入方法(此处不再赘述,相关资源容易搜索到),结果轮播依然无法自动播放。
angular引入swiper
最近在调整一个基于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,
},
});
}
}
完成配置后即可正常使用。
