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

最新推荐文章于 2023-02-22 18:33:16 发布

原创最新推荐文章于 2023-02-22 18:33:16 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

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

在使用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

    })