ionic项目中的轮播图使用swiper实现，循环轮播总是从第二页开始

1.  安装swiper插件：(使用的是3.2.4版本)别的版本请参考官方文档：https://www.swiper.com.cn/demo/index.html

npm install [email protected]

2. html 页面

     

       

         

       

     

     

     

   

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)

  }