swiper4.5因为display:none再次显示无法自动滑动问题解决方案
作者:PB模板网
时间:2022-04-16 21:09:05
浏览:1979
点赞:235
问题是这样的: 当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得大功告成的时候,你会发现,永远只有第一个tab上的swiper生效了,其余的不管你怎么切换,swiper总是初始化失败,是的,就是不能愉快的滚动了~
解决方法
官网给出的解决方案是,使用observer: swiper4的api地址: https://www.swiper.com.cn/api/observer/218.html
observer:true,//修改swiper自己或子元素时,自动初始化 swiperobserveParents:true,//修改swiper的父元素时,自动初始化swiper
案例:
<script language="JavaScript"> var mySwiper = new Swiper('.swiper-container',{ pagination: { el: '.swiper-pagination', }, observer:true, }) $('#btn1').click(function(){ $(".swiper-wrapper .swiper-slide1").remove(); }) </script>
也可以再试试mySwiper.init(),重新初始化的方式。
此方法,可以解决因display:none,导致的swiper无法初始化的问,但是无法解决无法自动播放的我问题。
文章链接:https://www.pbhtml.com/458.html
文章标题:swiper4.5因为display:none再次显示无法自动滑动问题解决方案
文章版权:PB模板网 (www.pbhtml.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于
文章标题:swiper4.5因为display:none再次显示无法自动滑动问题解决方案
文章版权:PB模板网 (www.pbhtml.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于
2022-12-23 09:59:59
,某些文章具有时效性,若有错误或已失效,请在下方留言或联系客服:pbhtml@qq.com