vue-cli里面引入swiper轮播组件,开启轮播后,第一张图总是一闪而过

我是全局引入的swiper组件,在没有开启自动轮播之前,都是正常的,但是开启之后。就发现了错误。轮播到最后一张之前都是正常的,但是到了最后一张,好像时间有长一点,然后第一张一闪而过,就突然跳到第二张了。
代码截图如下:
图片描述

图片描述

其他的代码就没有。搞了快一天了,之前用的iview的轮播也是有问题,换了现在这个又出现问题。如果有其他好的vue轮播组件推荐也行,麻烦大佬了。

阅读 8.4k
2 个回答

数据是不是后端接口ajax获取的?

试一下 在获取数据后
this.$nextTick(()=>{

swiper.init() // 再初始化swiper

})

新手上路,请多包涵

setTimeout(function(){

              var mySwiper = $('#swiper1').swiper({
            loop: true,
            autoplay: 4000, //自动切换的时间间隔(单位ms)        
            speed: 500, //滑动速度:自动滑动开始到结束的时间(单位ms)        
            autoplayDisableOnInteraction: false, //注意此参数,默认为true        
            observer: true, //修改swiper自己或子元素时,自动初始化swiper        
            observeParents: true, //修改swiper的父元素时,自动初始化swiper        
    });
               },500);

用延时器包一下
或者把初始化swiper的js放到动态加载图片的代码之后

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏