解决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份量仍是过大，在移动端流量如黄金的平台下以为仍是太大。若是有更好的解决方案但愿你们能够多多指教!