Minimal jQuery Infinite Carousel Plugin - dbpasCarousel

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

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.