Configurable JavaScript Slideshow / Carousel Library – Slideshow.js

Category: Javascript , Slideshow | April 20, 2016
Author: s-richards
Views Total: 4,120
Official Page: Go to website
Last Update: April 20, 2016
License: MIT

Preview:

Configurable JavaScript Slideshow / Carousel Library – Slideshow.js

Description:

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'

Leave a Reply