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

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

npm install swiper@3.2.4

2. html 页面

     

       

          {{item.alt}}

       

     

     

     

   

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)

  }

你可能感兴趣的:(ionic项目中的轮播图使用swiper实现,循环轮播总是从第二页开始)