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

本文介绍如何在点击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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值