Easy Coverflow Carousel Plugin For jQuery - Carousel.js

A cross-browser (IE8+) jQuery plugin used for create a coverflow-style 3D perspective image carousel / rotator with convenient configuration options.

How to use it:

1. Create a list of images to be displayed in the carousel.

<ul class="poster-list"> 
  <li class="poster-item"><a href="#"><img src="1.jpg" alt="" width="100%" /></a></li> 
  <li class="poster-item"><a href="#"><img src="2.jpg" alt="" width="100%" /></a></li> 
  <li class="poster-item"><a href="#"><img src="3.jpg" alt="" width="100%" /></a></li> 
  <li class="poster-item"><a href="#"><img src="4.jpg" alt="" width="100%" /></a></li> 
  <li class="poster-item"><a href="#"><img src="5.jpg" alt="" width="100%" /></a></li> 
 </ul>

2. Create navigation buttons which allow the user to rotate through the images manually.

<div class="poster-btn poster-prev-btn"></div> 
<div class="poster-btn poster-next-btn"></div> 

3. The wrap them into a container element and override the default settings in the data-setting attribute . The whole markup structure should be like this:

<div class="poster-main" id="carousel" data-setting='{
       <!-- options here -->
     }'> 
  <div class="poster-btn poster-prev-btn"></div> 
  <ul class="poster-list"> 
    <li class="poster-item"><a href="#"><img src="1.jpg" alt="" width="100%" /></a></li> 
    <li class="poster-item"><a href="#"><img src="2.jpg" alt="" width="100%" /></a></li> 
    <li class="poster-item"><a href="#"><img src="3.jpg" alt="" width="100%" /></a></li> 
    <li class="poster-item"><a href="#"><img src="4.jpg" alt="" width="100%" /></a></li> 
    <li class="poster-item"><a href="#"><img src="5.jpg" alt="" width="100%" /></a></li> 
  </ul> 
  <div class="poster-btn poster-next-btn"></div> 
</div>

4. Initialize the carousel and done.

Carousel.init($("#carousel"));
$("#carousel").init();

5. All possible plugin options:

// carousel width
"width": 1000,

// carousel height
"height": 270,

// image width
"posterWidth": 640, 

// image height
"posterHeight": 270, 

// aspect ratio
"scale": 0.8, 

// animation speed
"speed": 1000,

// auto play
"autoPlay": true,

// auto play interval
"delay": 2000,

// 'top', 'bottom' or 'middle'
"verticalAlign": "bottom" 

---

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