jQuery

【jQuery】スワイプサポート付きのカルーセルプラグインSwipe Slider

September 26, 2018
Image Slider With Swipe

Swipe Sliderはスワイプサポート付きのjQueryカルーセルプラグイン。

How to use

マークアップを追加

<figure id="sample_slider" class="swipeslider">
<ul class="sw-slides">
  <li class="sw-slide">
    <img src="img/lang_yie_ar_kung_fu.jpg" alt="Lang from Yie Ar Kung Fu">
  </li>
  <li class="sw-slide">
    <img src="img/summer_beach.jpg" alt="Summer beach concept">
  </li>
  <li class="sw-slide">
    <img src="img/borderlands_tiny_tina.jpg" alt="Tiny Tina from Borderlands 2">
  </li>
  <li class="sw-slide">
    <img src="img/redhead.jpg" alt="Redhead girl">
  </li>
</ul>
</figure>

スクリプトを追加

<script>
$(window).load(function() {
  $('#sample_slider').swipeslider();
});
</script>

カスタマイズ

$('#sample_slider').swipeslider({autoPlay: false, swipe: false});

MIT