swipe组件使用注意事项

Swipe

先放出本文的主角，就是上面的 Swipe 组件。

这个组件兼容性性能做的都还好，我们对其做了一些优化后，大量使用在蘑菇街的网站上。

但是在使用的过程中有几点需要注意的地方：

1. 初始化获取的 swipe 获取是原生 dom 不是 jquery 对象，jquery 对象需要加[0]转成原生对象
2. 需求通常会要求只有一张图的时候不能滑动。
3. 很多时候在幻灯片子元素只有两个时候 continuous 不需要设置为 ture，可以设为 false，以优化性能。

解决上诉 b+c 遇到问题就是，一张幻灯片的时候不初始化 swipe，两张的时候不设置 continuous 和 auto。

// 幻灯片存在，则初始化
if ($("#head_slider").length > 0) initHeadSlider($("#head_slider"));

function initHeadSlider(obj) {
  // 获取slideBox
  var slideBox = obj;

  // 如果ul个数大于1，初始化滑动组件,且只有两屏的时候无法回滚
  if (slideBox.find(".head_banner").length > 1) {
    var continuous = true;
    var auto = 2500;
    // 如果幻灯片为2时不自动滚动和循环滚动
    if (slideBox.find(".head_banner").length <= 2) {
      continuous = false;
      auto = false;
    }
    var mySwipe = new Swipe(slideBox[0], {
      auto: auto,
      continuous: continuous,
      callback: function (index, element) {
        slideBox
          .find(".swipe_indicator li")
          .removeClass("active")
          .eq(index)
          .addClass("active");
      },
    });
  }
}