Simplistic jQuery Slideshow with Animated Captions - Simple Slider

File Size: 167 KB
Views Total: 5253
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simplistic jQuery Slideshow with Animated Captions - Simple Slider

An intuitive & simple-to-use jQuery plugin to build a generic image slideshow for your website, with support of forward/backward navigation and animated image captions. No CSS required.

How to use it:

1. Load the jQuery simpleSlider plugin after loading JQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script tsrc="src/jquery.simpleSlider.js"></script>

2. Insert a list of images for your slideshow using Html unordered list. The plugin will auto generate an animated caption bar that loads caption text from title attribute in your li tags. The markup structure should be like this:

<div id="demo">
  <ul>
    <li title="Image Caption 1"><img src="img/img1.jpg"></li>
    <li title="Image Caption 2"><img src="img/img2.jpg"></li>
    <li title="Image Caption 3"><img src="img/img3.jpg"></li>
  </ul>
</div>

3. Initialize the plugin and set the width/height of your slideshow.

$(document).ready(function() {
$('#demo').simpleSlider({
  'width': 800,
  'height': 300,
});
});

Change log:

2014-10-17

2014-10-16

  • Indicators quant bug fix.

2014-10-14

  • update.

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