使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法

最新推荐文章于 2023-05-14 15:43:16 发布

转载最新推荐文章于 2023-05-14 15:43:16 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caoxueying2018/p/10149508.html

本文介绍如何在点击P1时实现两个页面的自动轮播效果，以及如何通过设置observer属性为true来避免手动触发，实现Swiper轮播器的自动初始化，确保点击P2后再点击P1仍能自动轮播。

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

问题：

项目中有一个需求，当点击P1时，两个页面进行轮播。当点击P2时，页面不轮播。

设置好以后，点击P2，再点击P1，此时页面不能自动轮播，只能手动触发。

解决：

在轮播器配置里，配置observer值为true，即可自动初始化swiper。此时不需手动触发，就可自动轮播。

代码如下：

      swiperOption3: {
        autoplay: 3 * 1000,
        setWrapperSize: true,
        autoplayDisableOnInteraction: false,
        observer: true,    　　　　// 启动动态检查器，当改变swiper的样式（例如隐藏/显示）
                                     或者修改swiper的子元素时，自动初始化swiper。
                                     默认false，不开启，可以使用update()方法更新。
        observeParents: true,    //  将observe应用于Swiper的父元素。当Swiper的父元素变化时，
　　　　　　　　　　　　　　　　　　　　　　 例如window.resize，Swiper更新。
        direction: 'horizontal',
        pagination: '.a2-swiper-roam3',
        paginationClickable: true
      },

关于observer的官方解读，请点击链接

转载于:https://www.cnblogs.com/caoxueying2018/p/10149508.html