Simplistic jQuery Slideshow with Animated Captions - Simple Slider
File Size: | 167 KB |
---|---|
Views Total: | 5260 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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
- update.
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.