swiper轮播图包在div(tab切换)下js上一页下一页点击事件失效解决办法

版权声明：转载请注明出处链接! https://blog.csdn.net/qq_40259641/article/details/84856857

问题: 

 

两种解决办法:

解决办法一:
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初始化失败

更多常见坑点这里>>>传送门