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 });
主要是上面标红的两行,设置自动初始化参数就可以了。。。。