Generic Content Carousel Plugin with jQuery and CSS3 - Carousel.js

Just another jQuery carousel plugin which allows to scroll horizontally or vertically through a set of DIV elements with customizable CSS3 animations.

Features:

• 2 built-in animations: fade and zoom.
• Supports both horizontal and vertical scrolling.
• Auto starts on page load.
• Infinite looping.
• Allows multiple items on one slide.

Basic usage:

1. Include jQuery library and the jQuery Carousel.js plugin's JS & CSS on the html page.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="carousel.js"></script>
<link rel="stylesheet" href="carousel.css">

2. Add a set of DIV elements to the carousel.

<div id="carousel-demo" class="carousel">
  <div class="item">Slide 1</div>
  <div class="item">Slide 2</div>
  <div class="item">Slide 3</div>
  <div class="item">Slide 4</div>
  <div class="item">Slide 5</div>
  <div class="item">Slide 6</div>
  <div class="item">Slide 7</div>
  <div class="item">Slide 8</div>
</div>

3. Generate a basic carousel with one JS call.

$("#carousel-demo").carousel();

4. Configuration options with default values.

$("#carousel-demo").carousel({

  // 'zoom' or 'fade'
  animate: false,

  // transition delay
  timeout: 2000,

  // auto play
  auto: true,

  // infinite loop
  repeat: true,

  // width of the carousel
  width: null, 

  // number of items
  scrollBy: 1, 

  // 'horizontal' or 'vertical'
  layout: "horizontal", 

  // 'normal' or 'reverse'
  direction: "normal" 
  
});

---

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