出现原因:由于swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动。
解决方式:在动态获取数据之后再初始化。另外需要加入如下两个配置参数。
var mySwiper = new Swiper ('.swiper-container', {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
}
})
另外,项目需要发布在导览机上使用,结果部署之后发现在导览机上无法滑动。经过一番抓头发现是swiper版本号问题。开始用的swiper4.0.5无法滑动。修改为swiper5.3.6可以滑动。