Easy jQuery Slideshow Plugin with Slide Label Support - Digital Slideshow

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.