swiper插件问题总结

最新推荐文章于 2025-05-31 20:13:02 发布

若繁花逝尽

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量611

点赞数

CC 4.0 BY-SA版权

分类专栏：插件 swiper web 文章标签： web swiper

本文链接：https://blog.youkuaiyun.com/weixin_42979149/article/details/85159066

web 同时被 3 个专栏收录

39 篇文章

订阅专栏

插件

12 篇文章

订阅专栏

swiper

1 篇文章

订阅专栏

当Swiper组件的父元素处于隐藏状态时，可能导致二次初始化失败。本文介绍了解决这一问题的方法，通过设置observer和observeParents参数为true，实现Swiper在DOM变化时自动重新初始化。

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

swiper二次初始化无效

原因： 其父元素处于隐藏状态时，会导致初始化失败
解决办法： observer: true, observeParents: true,

var swiper = new Swiper('.swiper-container', {
      slidesPerView : 3,
      slidesPerGroup : 1,   
      spaceBetween: 30,
      observer: true,    // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,   //修改swiper自己或子元素时，自动初始化swiper
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },      
    });