【jQuery】軽量のタッチスライダープラグインSwipe
jQuery
October 15, 2017
- TAGS:
- jQuery
- Responsive
- Slider
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
