swiper5轮播一直卡在第二张或某张图,切换时仍会卡住——bug修改

本文分享了使用Swiper5轮播图时遇到的一个bug:轮播图总卡在第二张图片,且无法通过箭头切换。通过调整配置项,包括启用观察者模式、更新Swiper状态和重新开始自动播放,成功解决了问题。

使用swiper5时遇到的坑

在使用swiper5时,创建了一个轮播图,有多张图片,但是总是卡在第二张图片,且点击左右箭头切换图片时,也不会切换,依然卡在第二张图。(效果图如下)不论怎么操作 都会卡在第二张图

不管怎么操作,一直卡在第二张图这里。
经过不断修改,最后终于解决了此问题。代码如下

var swiper1 = new Swiper('#swiper1', {
   initialSlide :0,
   observer: true, //修改swiper自己或子元素时,自动初始化swiper
   observeParents: false, //修改swiper的父元素时,自动初始化swiper
   onSlideChangeEnd: function(swiper){
      swiper.update();  // 更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;
      swiper1.startAutoplay();  //重新开始自动切换;
      swiper1.reLoop();  // 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;
   },
   loop: false, // 循环模式选项
   slidesPerView: 5,
   paginationClickable: true,
   spaceBetween: 10,
   centeredSlides: true,
   // autoplay:3000,
   navigation: {
      nextEl: '.swiper-button-next1',
      prevEl: '.swiper-button-prev1',
   },
});

出现这个bug具体原因目前尚不清楚,猜测应该是动态赋值图片地址产生的影响,添加以上配置项便可解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值