【jQuery】JSスライドショー/カルーセルライブラリ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+
 
SLIDESHOW

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

  • LATEST
  • RELATED
  • POPULAR