Responsive & Touch-Enabled jQuery Carousel Slider Plugin - Carousel

Responsive & Touch-Enabled jQuery Carousel Slider Plugin - Carousel
File Size: 306 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.