Responsive & Touch-Enabled jQuery Carousel Slider Plugin - Carousel

Carousel is a feature rich yet easy-to-use jQuery plugin for creating a responsive and touch-friendly carousel slider just by calling carousel() function on an unordered list. The plugin is developed under the GPL licence.

Features:

• Auto calculates and resizes the slider to fit the window size.
• Swipe to slider on touch devices like iPad, iPhone, etc.
• Ajax content supported. You can load the content from an JSON data.
• Keyboard, mousewheel and touch navigation.
• Custom slider pager.
• Autoplay on page load.
• Muliple carousel sliders on one page.
• Infinite looping.
• Custom the direction of the slider.
• Support for easing effects with easing.css.
• Callback events supported, of course.

Basic Usage:

1. Add the basic CSS stylesheet to your web page.

<link rel="stylesheet" href="css/style.css">

2. Include the easing.css for easing options. (Optional)

<link rel="stylesheet" href="css/easing.css">

3. Create a set of Html elements you want to slide.

<div class="demo">
<ul>
<li><a href="#"><img src="images/1.png" />1</a></li>
<li><a href="#"><img src="images/2.png" />1</a></li>
<li><a href="#"><img src="images/3.png" />1</a></li>
...
</ul>
</div>

4. Include the latest jQuery javascript library and jQuery Carousel Plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery-carousel.js"></script> 

5. Call the plugin with default options.

<script>
$(document).ready(function($) {
$(".demo").carousel();
});
</script>

6. Configurations.

<script>
$(document).ready(function($) {
$(".demo").carousel({
autoplay: false,
infinite: true,
circular: false,
delay: 4000,
speed: 1000,
direction: 'right', //top, right, bottom, left
easing: 'linear',

pager: true, // Boolean: Show pager, true or false

nav: true, // Boolean: Show navigation, true or false,
navItems: 1,

prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button

render: function(item) {
	return '<li><img src="' + item.img + '" alt="" /></li>';
},
load: null,
/* function(callback){},*/

mousewheel: true,
touch: true,
keyboard: true,
responsive: true
});
});
</script>

Change logs:

2015-02-01

• fix trigger issue

2014-09-06

• update

2014-04-14

• add rtl support

2014-04-01

• fix touch link touch issue

2014-03-24

• update

2014-03-22

• update

2014-03-21

• update

2014-03-06

• modify the bug of itemsLength

2014-03-05

• modify the bug of responsive.

2014-03-03

• add lazyload support.

---

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