swiper及其父級隱藏之后輪播失效問題
最近做了一個項目,用到swiper插件,之前使用都還正常,這次使用莫名其妙出現了輪播失效的問題,經過層層測試,發現是因為tab切換導致輪播圖隱藏,再顯示的時候輪播就失效了
找到問題就好解決了,網上搜索一番,嘗試了一些做法,發現說是因為初始化的原因,每次輪播圖顯示的時候要重新初始化,當然swiper也有這個方面的參數可以去解決這個問題
var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, paginationClickable: true, observer: true, //修改swiper自己或子元素時,自動初始化swiper,主要是這兩行 observeParents: true //修改swiper的父元素時,自動初始化swiper });
主要是上面標紅的兩行,設置自動初始化參數就可以了。。。。
浙公網安備 33010602011771號