轮播图通过动态渲染数据后轮播失效,具体出现的问题:
数据确实渲染在页面上了
设置了autoplay,但是轮播图无法自动播放
也没有办法手动切换
加上以下代码后即可解决问题:
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
}
reLoop() 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;
update() 更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;
startAutoplay() 重新开始自动切换;