swiper.js在隐藏/显示切换时,轮播出现bug的解决办法

时间:2024-07-04 09:36:14

swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以移出可视区域,

出现问题的原因是分页器没有更新,所以要监控分页器的状态,官方提供一个属性 observe(observeParents)默认值false,修改为true即可,在切换container显示隐藏时便会回归正常。

这个问题官网提供了解决的方法,只需要设置一个属性就行,代码如下:

var mySwiper = new Swiper('.swiper-container', {
observer:true,//启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper })

官方链接:http://3.swiper.com.cn/api/Observer/2015/0308/218.html