在用H5做移动端项目，产品模型需要有个左右滑动轮播图效果。
使用的时候遇到了辣手的问题，使用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">
                     ![](../../images/center/ouya/ba01.jpg)
          </div>
          <div class="swiper-slide orange-slide swiper-slide-active">
                     ![](../../images/center/ouya/ba01.jpg)
          </div>
          <div class="swiper-slide">
                     ![](../../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">![]( + 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分量还是过大，在移动端流量如黄金的平台下觉得还是太大。如果有更好的解决方案希望大家可以多多指教!