jQuery

【jQuery】JSスライドショー/カルーセルライブラリSLIDESHOW

May 5, 2016
SLIDESHOW

SLIDESHOWはJavaScriptのスライドショー/カルーセルライブラリ

HTMLマークアップ

<div class="slideshow">
  <div class="slideshow-slide-list">
    <figure class="slideshow-slide">
      <img src="1.jpg" alt="image 1">
      <figcaption class="slideshow-caption">Slide 1 caption</figcaption>
    </figure>
    <figure class="slideshow-slide">
      <img src="2.jpg" alt="image 2">
      <figcaption class="slideshow-caption">Slide 2 caption</figcaption>
    </figure>
    <figure class="slideshow-slide">
      <p>Slide with text</p>
    </figure>
    <figure class="slideshow-slide">
      <img src="4.jpg" alt="image 4">
    </figure>
  </div>
</div>

リストを使用したマークアップ

<div class="slideshow">
  <ul class="slideshow-slide-list">
    <li class="slideshow-slide">
      <img src="1.jpg" alt="image 1">
      <p class="slideshow-caption">Slide 1 caption</p>
    </li>
    <li class="slideshow-slide">
      <img src="2.jpg" alt="image 2">
      <p class="slideshow-caption">Slide 2 caption</p>
    </li>
    <li class="slideshow-slide">
      <img src="3.jpg" alt="image 3">
    </li>
    <li class="slideshow-slide">
      <img src="4.jpg" alt="image 4">
    </li>
  </ul>
</div>

jQuery&CSS

<link href="path/slideshow.css" rel="stylesheet" type="text/css">
<script src="path/slideshow.js"></script>

オプション

Slideshow(el, options);

デフォルト設定

  1. allowSwipe: true
  2. autoplay: false
  3. controlsBelow: false
  4. delay: 5000
  5. loopSlides: true
  6. navArrows: true
  7. navNextClass: ”
  8. navPrevClass: ”
  9. playButton: false
  10. playButtonClass: ”
  11. playLoop: -1
  12. pauseOnUserNav: false
  13. showIndicators: false
  14. startOnSlide: 1
  15. transitionTime: 500
  16. transitionTimingFunction: ‘ease-out’
  17. transitionEffect: ‘fade’

ブラウザサポート

  1. Google Chrome
  2. Mozilla Firefox
  3. IE 10+