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

在用H5做移动端项目，产品模型需要有个左右滑动轮播图效果。
使用的时候遇到了辣手的问题，使用jquery的ajax动态循环生成当到第二页的时候始终滑动不起来，chrome的手机开发者模式和真机模式全都滑动不起来！
官方规范：

//此处为一个滑动页内容

测试代码

![](../../images/center/ouya/ba01.jpg)![](../../images/center/ouya/ba01.jpg)![](../../images/center/ouya/ba01.jpg)

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

var mySwiper = $('.swiper-container').swiper({ mode: 'horizontal', pagination: '.swiper-pagination', loop: true, observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true//修改swiper的父元素时，自动初始化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 += '![]( + v.optIcon + )'; }); $(".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分量还是过大，在移动端流量如黄金的平台下觉得还是太大。如果有更好的解决方案希望大家可以多多指教!