jQuery

【jQuery】レスポンシブスライダーカルーセルjQuery Fade Slider

May 20, 2017
jQuery Fade Slider

jQuery Fade Sliderはレスポンシブスライダーカルーセルを作成するシンプルなjQueryプラグイン。

jQuery

jQueryバージョン1.10.2以降を使用

<!-- Include jQuery -->
<script src="jquery-1.10.2.min.js"></script>

<!-- Include jquery-fade-slider -->
<script src="jquery-fade-slider.js"></script>

テンプレートを設定

<div class="carousel-wrapper">
  <div>Carousel Item 1</div>
  <div>Carousel Item 2</div>
  <div>Carousel Item 3</div>
  <div>Carousel Item 4</div>
  <div>Carousel Item 5</div>
  <div>Carousel Item 6</div>
  <div>Carousel Item 7</div>
  <div>Carousel Item 8</div>
  <div>Carousel Item 9</div>
  .....
</div>
$(document).ready(function() {
  $('.carousel-wrapper').fadeSlider()
})

MIT