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

张云，

已于 2022-11-09 14:59:59 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： swiper 文章标签：前端 javascript

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

本文链接：https://blog.youkuaiyun.com/buzhidjiaosha/article/details/122595807

swiper 专栏收录该内容

6 篇文章

订阅专栏

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

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

添加：
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
  });