解决swiper动态数据加载在移动端下左右滑动不好使？

最近在用H5做移动端项目，产品模型需要有个左右滑动轮播图效果。



同事介绍swiper这款滑动插件，Swiper 是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎！于是马上查看官方帮助文档开始学习。

今天在我使用的时候遇到了辣手的问题，使用jquery的ajax动态循环生成当到第二页的时候始终滑动不起来，chrome的手机开发者模式和真机模式全都滑动不起来！

官方规范：

<div class="swiper-container" ms-visible="result.status==1">
<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ms-repeat="result.mediaList">
//此处为一个滑动页内容
</div>
<!-- ============== -->
</div>
</div>

测试代码

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide orange-slide swiper-slide-active">
<img src="../../images/center/ouya/ba01.jpg">
</div>
<div class="swiper-slide orange-slide swiper-slide-active">
<img src="../../images/center/ouya/ba01.jpg">
</div>
<div class="swiper-slide">
<img src="../../images/center/ouya/ba01.jpg">
</div>
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>

当我在测试的时候，静态复制n个块。用Chrome手机开发模式调试左右滑动畅通无阻，排除了循环出错的问题！再次翻阅官方文档在初始化增加了2项设置（红色文字）：

var mySwiper = $('.swiper-container').swiper({
mode: 'horizontal',
pagination: '.swiper-pagination',
loop: true,
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true//修改swiper的父元素时，自动初始化swiper
});

但动态加载后Chrome调试手机开发模式可以左右滑动了，很顺通。于是真机测试，用苹果手机，安卓各项主流手机依然左右滑动不了。再次崩溃~~

于是各种排除问题，终于在pc端+移动端完美解决了问题！问题出在初始化的时候放在html文件了，应该放在接口取值后找到swiper-wrapper类后马上初始化！

$.ajax({
url: "memc/center/ouya/getChainImage",
type: "get",
dataType: "json",
timeout: "30000",
beforeSend: function() {
$(".swiper-wrapper").html("");
},
success: function(res) {
if (res.resCode == 1) {
var ht = '';
$.each(res.data, function(i, v) {
ht += '<div class="swiper-slide"><img src=' + v.optIcon + '></div>';
});
$(".swiper-container").find('.swiper-wrapper').html(ht);
var mySwiper = $('.swiper-container').swiper({
mode: 'horizontal',
pagination: '.swiper-pagination',
loop: true,
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true//修改swiper的父元素时，自动初始化swiper
});
} else {
showTips(res.msg);
}
},
error: function() {
showTips('焦点图未获取到');
}
});

题外话：

swiper这个插件压缩版有53kb分量还是过大，在移动端流量如黄金的平台下觉得还是太大。如果有更好的解决方案希望大家可以多多指教!