Responsive & Touch-Enabled jQuery Carousel Slider Plugin - Carousel

File Size: 306 KB
Views Total: 11284
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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">
<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>

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

<script src=""></script> 
<script type="text/javascript" src="jquery-carousel.js"></script> 

5. Call the plugin with default options.

$(document).ready(function($) {

6. Configurations.

$(document).ready(function($) {
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

Change logs:


  • fix trigger issue



  • add rtl support


  • fix touch link touch issue


  • update


  • update


  • update


  • modify the bug of itemsLength


  • modify the bug of responsive.


  • 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.