Generic Content Carousel Plugin with jQuery and CSS3 - Carousel.js
File Size: | 9.61 KB |
---|---|
Views Total: | 1465 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.