Minimal Content Slideshow Plugin with jQuery and CSS3 - Slideshow.js

File Size: 10.7 KB
Views Total: 1101
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Content Slideshow Plugin with jQuery and CSS3 - Slideshow.js

Slideshow.js is an easy-to-use jQuery plugin for generating an automatic slideshow / carousel from a group of html elements, with a subtle animation effect based on CSS3 transitions.

How it works:

Given a set of slide objects, marks the slide with given index as the current slide, when called, plays the animation and switches to the next slide in the sequence.

How to use it:

1. Include jQuery JavaScript library and the jQuery slideshow.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/slideshow-1.1.js"></script>

2. Add a group of html content to the slideshow. You can override the global variables via html data attributes as shown below.

  • data-direction="horizontal": the direction in which the slides should animate, either "horizontal" or "vertical"
  • data-delay="2000": the duration in between animations
<div class="slideshow" 
     data-direction="horizontal" 
     data-delay="2000"
     >
  <div class="slide" id="slides-1">Slide 1</div>
  <div class="slide" id="slides-2">Slide 2</div>
  <div class="slide" id="slides-3">Slide 3</div>
</div>

3. Add custom controls to the slideshow.

<div class="controllers">
  <button class="slideshow-controller" data-target="#slides-1">1</button>
  <button class="slideshow-controller" data-target="#slides-2">2</button>
  <button class="slideshow-controller" data-target="#slides-3">3</button>
</div>

4. That's it. When this script gets loaded, it extends jQuery with 4 functions, and automatically converts DOM elements with the .slideshow class to a animated slideshow.

Change log:

v1.2 (2015-11-08)


This awesome jQuery plugin is developed by kdeschuy. For more Advanced Usages, please check the demo page or visit the official website.