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

最新推荐文章于 2022-07-05 17:11:39 发布

weixin_30906701

最新推荐文章于 2022-07-05 17:11:39 发布

阅读量955

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-wjg/p/9209643.html

本文介绍了解决Swiper在由隐藏状态切换至显示状态时出现的滑动卡顿及最后一张图片移出可视区域的问题。通过将observe属性设置为true，确保分页器状态得到及时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/web-wjg/p/9209643.html