前言：以前都觉得swiper的使用很简单，那是因为使用swiper时都是写的数据，按照官网上介绍直接初始化swiper，随便丢一个地方初始化就ok了，但是在很多需求中，我们都需要动态的改变数据，这样可能就会遇到很多问题。
出现的问题：
- swiper不能自动切换（设置了autoplay）。
- 数据不匹配（需要加载的数据以改变，但是swiper里面的数据出现错误）。
- 数据匹配过后，永远切换不到第一条数据。
- 根本不能切换，手动拉也拉不动。
... ...
目前有两种解决办法：
1、在动态获取数据后马上对swiper进行初始化。
$.ajax({
type:"POST",
url:"__URL__"+"/bar",
dataType:"json",
async:"false",
data:{},
success:function(result){
if(result){
for(var i=0;i<result.length;i++){
bannerHtml+='<div class="swiper-slide"><a href="'+result[i].banner_url+'"><img src="'+result[i].banner_image+'"></a></div>';
}
$(".swiper-wrapper").html(bannerHtml);
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,
speed:1000,
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
}
})
2、在swiper初始化的时候，加上一下参数：
swiper1 = new Swiper('.swiper-container', {
initialSlide :0,
observer:true, //修改swiper自己或子元素时，自动初始化swiper
observeParents:true, //修改swiper的父元素时，自动初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update(); //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
mySwiper.startAutoplay(); //重新开始自动切换；
mySwiper.reLoop(); //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
}
});
