swipe.js使用中遇到的bug：2张图片实例化后变4张。已解决

滑feng

上代码：<div id="slider" class="swipe">
    <div class="swipe-wrap" id="banner">
      <div><img src="../../image/home/banner1.png" alt="轮播图1"></div>
      <div><img src="../../image/home/banner2.png" alt="轮播图2"></div>
    </div>
    <ul class="swipe-dot">
      <li></li>
      <li></li>
    </ul>
  </div>


实例化：
var $slider = $api.dom('#slider');
var swipe = Swipe($slider, {
    'auto': 4000,
    'continuous': true,
    'disableScroll': false,
    'stopPropagation': false,
    'callback': function(index) {
      console.log(index);
      console.log($api.html($slider));
    }
  });



控制台输出：
0,1,2,3。
<div class="swipe-wrap" id="banner" style="width: 1648px;">
    <div data-index="0" style="width: 412px; left: 0px; transition-duration: 300ms; transform: translate(-412px, 0px) translateZ(0px);"><img src="../../image/home/banner1.png" alt="轮播图1"></div>
    <div data-index="1" style="width: 412px; left: -412px; transition-duration: 300ms; transform: translate(-412px, 0px) translateZ(0px);"><img src="../../image/home/banner2.png" alt="轮播图2"></div>
    <div data-index="2" style="width: 412px; left: -824px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);"><img src="../../image/home/banner1.png" alt="轮播图1"></div>
    <div data-index="3" style="width: 412px; left: -1236px; transition-duration: 0ms; transform: translate(412px, 0px) translateZ(0px);"><img src="../../image/home/banner2.png" alt="轮播图2"></div>
</div>
<ul class="swipe-dot" id="dot"> <li></li> <li></li> </ul>


就是这么神奇，只有2个div轮播内容的时候会出这个bug，其他都正常。所以如果需要使用回调函数来添加dot或者当前页号，就需要处理下回调（当然也可以考虑修改swipe.js插件，原谅我懒惰，只修改了表象），下面是我封装的方法，供参考：
function initSwipe(fnCallback,num){             //fnCallback：轮播的回调函数；num：轮播组的数量
  var swipe = Swipe($api.dom('#slider'), {
    'auto': 4000,
    'continuous': true,
    'disableScroll': false,
    'stopPropagation': false,
    'callback': function(index) {
      // console.log(index);
      // console.log($api.html($api.dom('#slider')));
      if(num == 2){
        if(index == 2){index = 0;}
        else if(index == 3)(index = 1)
      }
      if(fnCallback){
        fnCallback(index);
      }
    }
  });
}

如果不需要显示当前页码，fnCallback,num都不需要传。该方法只是在表象上修正了bug，实际轮播的图还是四张，懒人方法。

辉哥_0808

div是4个，那页面显示几张？

滑feng

辉哥_0808 发表于 2018-8-10 10:56
div是4个，那页面显示几张？

实际显示也是4张