1. 程式人生 > >swiper輪播圖包在div(tab切換)下js上一頁下一頁點選事件失效解決辦法

swiper輪播圖包在div(tab切換)下js上一頁下一頁點選事件失效解決辦法

問題: 

 

兩種解決辦法:

解決辦法一:
var mySwiper = new Swiper ('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',

            //解決辦法1,監聽元素:
            observer:true,//修改swiper自己或子元素時,自動初始化swiper
            observeParents:true//修改swiper的父元素時,自動初始化swiper
})       


解決辦法二:
var mySwiper = new Swiper ('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',

            //解決辦法2,寫死寬高:
            width: 1000px,
            height: 1000px
})       

原因是:

swiper在初始化時, 其父級元素處於隱藏狀態(display:none),會導致swiper初始化失敗

 

更多常見坑點這裡>>>傳送門