使用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具体原因目前尚不清楚,猜测应该是动态赋值图片地址产生的影响,添加以上配置项便可解决。

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

被折叠的 条评论
为什么被折叠?



