Simple Any Content Carousel Plugin For jQuery - a11ycarousel

Simple Any Content Carousel Plugin For jQuery - a11ycarousel
File Size: 6.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another lightweight jQuery plugin for creating an auto-rotating carousel that supports any Html contents.

More features:

  • Auto play at a certain interval.
  • Easy to implement with plain Html markup.
  • Auto generates controls to play or pause the carousel
  • jQuery easing supported.
  • Bottom dots navigation.
  • Compatible with modern browsers and IE7+.

Basic Usage:

1. Load the jQuery javascript library together with jQuery a11ycarousel plugin's javascript and CSS in your Html page.

<link href="a11ycarousel.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="a11ycarousel.js"></script>

2. Insert your carousel contents into a Html list.

<div id="demo">
  <ul>
    <li><img src="http://lorempixel.com/400/300/people" alt="Alt 1" width="400px" /></li>
    <li><img src="http://lorempixel.com/400/300/abstract" alt="Alt 2" width="400px" /></li>
    <li><img src="http://lorempixel.com/400/300/business" alt="Alt 3" width="400px" /></li>
  </ul>
</div>

3. To initialize the plugin, simplely call the function on the parent element.

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

4. All the default settings.

  • width: 400 -  The width of the carousel viewport, in pixels.
  • height: 300 -  The height of the carousel viewport, in pixels.
  • autoPlay: false -  Whether to begin playing the carousel automatically, or leave it to the user to advance slides.
  • playInterval: 9000 -  Length of time each slide will be displayed when auto-playing, in milliseconds.
  • slideSpeed: 1000 -  Length of time taken to transition between slides, in milliseconds.
  • easing: 'ease' -  Easing to use when transitioning between slides, applied when CSS transitions are supported.
  • additionalControlHeight: 0 -  Height of control section, in pixels. When specified, the additional height will be added to the carousel container. If not specified or zero, the controls will overlay the carousel items.

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