使用Swiper轮播插件插件失效，按F12弹出编辑器后才有效

TimerWki

于 2021-10-24 21:16:05 发布

阅读量387

点赞数

CC 4.0 BY-SA版权

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/TimerWki/article/details/120941180

当Swiper轮播插件与其它插件并用时，可能遇到只在打开F12开发者工具后才正常工作的问题。解决方法是在初始化Swiper时添加`observer: true`和`observeParents: true`属性，这两个属性确保在swiper自身或其父元素变化时自动初始化，从而实现正常运行。

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

在使用Swiper轮播插件插件与其他插件一起使用的时候使得Swiper轮播插件插件，按了F12按F12弹出编辑器后才有效

解决方法

只要给每个swiper添加两个属性就行了 observer: true, 修改swiper自己或子元素时，自动初始化swiper； observeParents: true ，修改swiper的父元素时，自动初始化swiper。

var mySwiper = new Swiper('.swiper-container', {

        pagination : '.swiper-pagination',

        paginationClickable :true,

        observer: true,//修改swiper自己或子元素时，自动初始化swiper

        observeParents: true  //修改swiper的父元素时，自动初始化swiper

    })