jQuery

【jQuery】軽量のタッチスライダープラグインSwipe

October 15, 2017
Swipe2

Swipeは、正確なタッチスライダーです。非常に軽量(5kb)で、IE7 +を含むすべてのブラウザで動作します。

Markup

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Style

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

Vanilla Javascript

var element = document.getElementById('mySwipe');
window.mySwipe = new Swipe(element, {
  startSlide: 0,
  auto: 3000,
  draggable: false,
  autoRestart: false,
  continuous: true,
  disableScroll: true,
  stopPropagation: true,
  callback: function(index, element) {},
  transitionEnd: function(index, element) {}
});

Using jQuery or Zepto

window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

MIT