解決swiper在tab切換時，swiper不生效，以及display:none后，無法自動滑動的問題

問題是這樣的：當你興高采烈的寫完一個tab，并且把swiper嵌入到每一個tab item 覺得大功告成的時候，你會發(fā)現(xiàn)，永遠只有第一個tab上的swiper生效了，其余的不管你怎么切換，swiper總是初始化失敗，是的，就是不能愉快的滾動了~

方法一、官網(wǎng)給出的解決方案是，使用observer：swiper4的api地址:
https://www.swiper.com.cn/api/observer/218.html.

observer:true,//修改swiper自己或子元素時，自動初始化swiper observeParents: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，導(dǎo)致的swiper無法初始化的問，但是無法解決無法自動播放的我問題。

方法二、通過z-index改變層級關(guān)系，可以完美解決問題。【完美解決2大問題】

Tab的寫法

$('.tab-top li').click(function () {$(this).addClass("on").siblings().removeClass('on');var idx = $(this).index();/*swiper4 當display:none 后 再次顯示 無法自動滑動問題解決方案：可以通過更改z-index的層級來解決*/$(".tab-box").eq(idx).addClass("on").siblings(".tab-box").removeClass("on"); //通過on來改變層級，實現(xiàn)tab切換，這樣的話，對swipe的初始化，不會產(chǎn)生印象了。});

swiper4的初始化方法：

var swiper1 = new Swiper('.swiper1', {observer:true,//修改swiper自己或子元素時，自動初始化swiperobserveParents:true,//修改swiper的父元素時，自動初始化swiperspeed:300,autoplay : {delay:3000,disableOnInteraction: false,},loop: true,pagination: {el: '.swiper-pagination1',clickable: true} });

完美解決display:none，產(chǎn)生的

1.因無法獲取高度而導(dǎo)致的無法初始化的問題

2.因display:none，而導(dǎo)致的自動輪播不生效的問題。

總結(jié)

以上是生活随笔為你收集整理的解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。