1. 安装swiper插件：(使用的是3.2.4版本)别的版本请参考官方文档：https://www.swiper.com.cn/demo/index.html
npm install swiper@3.2.4
2. html 页面
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let item of headerSlideData">
<img class="swiper-img" alt="{{item.alt}}" src="{{item.src}}">
</div>
</div>
<!--如果需要分页器-->
<div class="swiper-pagination"></div>
</div>
3 .ts 文件
初始化swiper
initHeaderSlider(){
this.swiper = new Swiper('.swiper-container',{
slidesPerView:1,
paginationClickable:true,
centeredSlides:true,
autoplay:2000,
autoplayDisableOnInteraction:false,
loop:true,
pagination:'.swiper-pagination',
observer:true,
observeParents:true
})
}
在ionViewDidLoad() 方法中执行该初始化方法
ionViewDidLoad(){
this.initHeaderSlider();
}
按以上方法配置，可以实现图片轮播，但是，从第二次开始循环以后，总是从第二张图片开始，---以下是解决该问题的方法
给初始化swiper 轮播图的代码加上延迟执行，就可以了：如下
initHeaderSlider(){
setTimeout(() => {
this.oSwiper1 = new Swiper('.swiper-container',{
slidesPerView:1,
paginationClickable:true,
centeredSlides:true,
autoplay:2000,
autoplayDisableOnInteraction:false,
loop:true,
pagination:'.swiper-pagination',
observer:true,
observeParents:true
})
}, 100)
}
