Swiper中文论坛

标题: swiper 第二次循环时直接从第二张开始循环了 [打印本页]

作者: 陈梦苒 时间: 2017-2-3 16:36
标题: swiper 第二次循环时直接从第二张开始循环了
swiper 循环一次后，第二次循环时直接跳过第一张图片，从第二张开始循环了，相同的代码在其它页面没有问题
html:

<div class="swiper-container" id="swiper1" style="margin-top: -1px;">
<div class="swiper-wrapper">
<div class="swiper-slide lunbo" ng-repeat="l in lunboList" on-finish-render-filters ng-click="gotoDetail('1')">
<img ng-src="{{l.img}}" />
</div>
</div>

</div>

js:
var mySwiper = $('#swiper1').swiper({
loop: true,
autoplay: 4000, //自动切换的时间间隔（单位ms）
speed: 500, //滑动速度:自动滑动开始到结束的时间（单位ms）
autoplayDisableOnInteraction: false, //注意此参数，默认为true
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
});
js是放在controller.js里面的，轮播内容是动态加载的。请问各个大神，这个问题怎么解决啊？

作者: 落枫之殇 时间: 2017-3-20 16:17
把初始化swiper的js放到动态加载图片的代码之后试试，我试过可以

作者: 前端小白_web 时间: 2017-6-1 11:38
楼主的问题不知道解决了没有，我的在ionic中使用swiper的时候也出现了这个问题，不知道你是怎么解决的，能不能分享一下，邮箱：web_xyn@163.com,十分感谢！！！

作者: alilia 时间: 2017-9-21 11:40
setTimeout(function(){

   var mySwiper = $('#swiper1').swiper({
            loop: true,
            autoplay: 4000, //自动切换的时间间隔（单位ms）
            speed: 500, //滑动速度:自动滑动开始到结束的时间（单位ms）
            autoplayDisableOnInteraction: false, //注意此参数，默认为true
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
      });
   },500);

用延时器包一下
或者把初始化swiper的js放到动态加载图片的代码之后

作者: 回答一个 时间: 2018-3-30 16:39
反正我是这样改好的，后面加了这2条

onTouchStart: function (swiper) { setTimeout(function () { swiper.stopAutoplay(); }, 1); },
onTouchEnd: function (swiper) { setTimeout(function () { swiper.startAutoplay(); }, 1); }

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)