Swiper解决动态加载数据或自定义样式时滑动失效
原因分析:
swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数,从而完成初始化,但是由于动态加载是在初始化完成进行的操作,所以无法确定swiper-wrapper内部swiper-slide的个数,从而导致左右滑动失效
解决方案:
Swiper有这样两个参数:observer和observeParents,前者启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。后者原理和前者一样,只是将observe应用于Swiper的父元素。两者默认值都为false。
所以在原来的swiper初始化代码时,swiperOption中加入如下两行代码即可
var mySwiper = new Swiper('.swiper-container',{
//……
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
//……
})