swiper隐藏（display:none）后，在显示轮播失效解决办法

原创已于 2022-11-09 14:59:59 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-01-20 10:17:32 首次发布

swiper 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Swiper配置observeParents及observer属性实现自动初始化。通过设置这些选项，当Swiper自身或其父元素发生变化时，Swiper可以自动重新初始化，确保滑动组件的正确显示。

添加：
observeParents: true, //修改swiper的父元素时，自动初始化swiper
observer: true //修改swiper自己或子元素时，自动初始化swiper

  var mySwiper1 = new Swiper(".mySwiper", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    observer: true   //修改swiper自己或子元素时，自动初始化swiper
  });