Easy jQuery Slideshow Plugin with Slide Label Support - Digital Slideshow
File Size: | 618KB |
---|---|
Views Total: | 1308 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Digital Slideshow is a simple and easy-to-use jQuery plugin that turns a group of images into a slideshow with auto play and slide label/text support.
How to use it:
1. Include the latest jQuery library and jQuery Digital Slideshow Plugin in the header
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script> <script type="text/javascript" src="js/slideshow-1.0.0.js"></script> <link rel="stylesheet" media="screen" href="css/slideshow.css" type="text/css" />
2. Create the html. Using data-*
attributes for slide text/label
<div id="slideshow"> <div class="slides"> <img src="slider/1.png" alt="image1" data-label="Slide Label 1" data-text="Slide Text 1" /> <img src="slider/2.png" alt="image2" data-label="Slide Label 2" data-text="Slide Text 2" /> <img src="slider/3.png" alt="image3" data-label="Slide Label 3" data-text="Slide Text 3" /> <img src="slider/4.png" alt="image4" data-label="Slide Label 4" data-text="Slide Text 4" /> <div class="description"></div> <div class="preloader"></div> </div> <div class="navigation"></div> </div>
3. Call the plugin with options
<script type="text/javascript"> $(document).ready(function() { slideshow({ rootElement: 'slideshow', w: 800, // width of your slideshow h: 300, // height of your slideshow autoplay: true }); }); </script>
4. All the options
<script type="text/javascript"> $(document).ready(function() { slideshow({ rootElement: 'slideshow', w: 800, // width of your slideshow h: 300, // height of your slideshow autoplay: true, stepInterval: 1000, autoplayInterval: 5000, pauseInterval: 10000, timer: null, actualSlideIndex: 0, prevSlideIndex: 0, numSlides: 0 }); }); </script>
This awesome jQuery plugin is developed by maho125. For more Advanced Usages, please check the demo page or visit the official website.