Minimal jQuery Infinite Carousel Plugin - dbpasCarousel
File Size: | 7.55KB |
---|---|
Views Total: | 2401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

dbpasCarousel is yet another simple jQuery plugin that turns an unordered list into a infinite carousel which supports any html elements like text, image, etc.
Features:
- infinite slide
- auto play and auto delay
- pause auto slide when hovering over carousel
- auto generate captions for each slide using img alt attribute
- callback function supported
Basic Usage:
1. Include jQuery library and jQuery dbpasCarousel on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="jquery.dbpas.carousel.js"></script>
2. Include required jQuery dbpasCarousel CSS to style the plugin
<link href="jquery.dbpas.carousel.css" rel="stylesheet" type="text/css">
3. Create a html list
<ul id="demo1"> <li><img src="http://lorempixel.com/150/150/abstract" /></li> <li><img src="http://lorempixel.com/150/150/animals" /></li> <li><img src="http://lorempixel.com/150/150/nature" /></li> <li><img src="http://lorempixel.com/150/150/people" /></li> <li><img src="http://lorempixel.com/150/150/city" /></li> </ul>
4. Call the plugin with options
<script> $(document).ready(function() { $('#demo1').dbpasCarousel({ itemsVisible: 2, // Number of items to display. autoSlide: 1, // auto play slideDelay: 500, // carousel animations duration, in milliseconds autoDelay: 5000, // The frequency the auto slide moves the carousel, in milliseconds. hoverPause: 1, // Pause auto slide when hovering over carousel. imgCaption: 1, // Auto generate captions for each slide using img alt attribute. onComplete: // callback function }); }); </script>
This awesome jQuery plugin is developed by dbpas. For more Advanced Usages, please check the demo page or visit the official website.