swiper4.5因为display:none再次显示无法自动滑动问题解决方案

作者:超级管理员 时间:2023-04-26 浏览:114 点赞:10
114

问题是这样的: 当你兴高采烈的写完一个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无法初始化的问,但是无法解决无法自动播放的我问题。


文章标题:swiper4.5因为display:none再次显示无法自动滑动问题解决方案
pboot建站网 (hhsy.cc) 所发布的内容,部分为原创文章,
转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2023-04-26
某些文章具有时效性,若有错误或已失效,请留言或联系客服:hsy_99999999@163.com

相关阅读