apicloud apicloud

注册
查看: 446|回复: 2

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

驾校小白

UID:665394

主题:
11
帖子:
35
云币:
42

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

446 2 | 发表于 2018-8-10 10:51:20 |阅读模式 | |
上代码:<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,