Basic Responsive jQuery/CSS3 Carousel Plugin - JQuery-Carousel

File Size: 2.89 MB
Views Total: 1082
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

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

$(function() {
    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:


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