Easy jQuery Content Carousel Slider Plugin - jQuery Carousel

jQuery Carousel is a simple yet powerful jQuery plugin for creating a content carousel slider on your web page, which supports page lists, vertical & horizontal scrolling, class-toggling, timers, timer offsets as well as touch and keyboard events. 

You can use the data-* attributes to control and customize your carousels:

• data-carousel-style: horizontal (default), vertical and class-only.
• data-carousel-pagelist: Adds a page list to the carousel container, containing links to each item.
• data-carousel-timer="10000": Automatically cycles the carousel through the items every 10000 milliseconds (10 seconds). 
• data-carousel-timer-delay="2000": Adds a 2000 millisecond (2 second) delay to the first cycle.
• data-carousel-timer-nopause: Prevents the carousel from pausing on hover or touch events.
• data-carousel-notouch: Prevents the carousel from responding to touch events.
• data-carousel-nokeyboard: Prevents the carousel from responding to keyboard events. 

Basic Usage:

1. Include required jQuery Carousel CSS in the header

<link href="abitgone-carousel.css" rel="stylesheet">

2. Create the html

<div class="carousel-container carousel-horizontal" data-carousel data-carousel-style="horizontal" data-carousel-timer="6000" data-carousel-pagelist>
<div class="carousel-items" data-carousel-items>
<div class="carousel-item" data-carousel-item id="chi1" style="background-image: url(http://lorempixel.com/600/400/?1);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi5"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi2"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi2" style="background-image: url(http://lorempixel.com/600/400/?2);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi1"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi3"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi3" style="background-image: url(http://lorempixel.com/600/400/?3);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi2"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi4"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi4" style="background-image: url(http://lorempixel.com/600/400/?4);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi3"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi5"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi5" style="background-image: url(http://lorempixel.com/600/400/?5);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi4"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi1"><span>Next</span></a>
</div>
</div>
</div>data-carousel-style

3. Include jQuery library and jQuery Carousel on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="abitgone-carousel.js"></script>

---

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