Configurable JavaScript Slideshow / Carousel Library – Slideshow.js

Slideshow.js is a pure JavaScript library for building a fully configurable, mobile-friendly slideshow / carousel to showcase your images.

Features:

• Simple to use.
• Supports both touch swipe and mouse drag.
• Autoplay mode.
• Infinite loop.
• Custom transition effects.

How to use it:

Link to the slideshow.js and slideshow.css files in your html file.

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

Add images and captions using either div ul or figure figcaption tags.

<div class="slideshow demo">
  <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">
      <img src="3.jpg" alt="image 3">
      <figcaption class="slideshow-caption">Slide 3 caption</figcaption>
    </figure>
    <figure class="slideshow-slide">
      <img src="4.jpg" alt="image 4">
      <figcaption class="slideshow-caption">Slide 4 caption</figcaption>
    </figure>
  </div>
</div>

Set a fixed height in the CSS.

.demo { height:420px; }

Initialize the Slideshow.js.

Slideshow(el, options);

All configuration options with default values.

// allow swipe to slide
allowSwipe: true,
// autoplay
autoplay: false,
// shows controls at the bottom
controlsBelow: false,
// delay in ms
delay: 5000,
// infinite loop
loopSlides: true,

// show navigation arrows
navArrows: true,
// CSS classes for next/prev buttons
navNextClass: '',
navPrevClass: '',
// shows play button
playButton: false,
// CSS class for play button
playButtonClass: '',
// number of times for autoplay to loop over slides
playLoop: -1,
// autoplay when user uses navigation arrows
pauseOnUserNav: false,
// shows indicators
showIndicators: false,
// slide to start on
startOnSlide: 1,
// transition delay
transitionTime: 500,
// easing function
transitionTimingFunction: 'ease-out',
// fade or slide
transitionEffect: 'fade'