Basic Responsive jQuery/CSS3 Carousel Plugin - JQuery-Carousel

A very basic jQuery carousel plugin which takes advantages of CSS3 transitions and transforms to automatically and infinitely slide an array of images in both direction.

How to use it:

1. Load the required jquery.carousel.min.css in the document's head section.

<link rel="stylesheet" href="css/jquery.carousel.min.css">

2. Load the jQuery-carousel plugin after you have jQuery loaded.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.carousel.min.js"></script>

3. Create an empty DIV element that will be served as the container for the carousel.

<div class="container">
</div>

4. Call the plugin on the empty container and specify the image folder path & file names.

$(function() {
  $('.container').Carousel({
    imagePath: 'images/',
    images: ['1.jpg','2.jpg','3.jpg'],
  });
});

5. Full plugin options.

// path to the image folder
imagePath: 'images/',

// height
height: 500,

// array of images
images: ['carousel01.jpg','carousel02.jpg','carousel03.jpg'],

// transition time in ms
transitionTime: 1000,

// transition delay
pauseTime: 5000,

// left or right
direction: 'right',

// display navigation buttons
buttons: true

Change log:

2015-05-06

• small fix
• added a height variable to the plugin

---

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