Minimal Content Slideshow Plugin with jQuery and CSS3 - Slideshow.js
|File Size:||10.7 KB|
|Official Website:||Go to website|
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:
<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.
This awesome jQuery plugin is developed by kdeschuy. For more Advanced Usages, please check the demo page or visit the official website.