Lightweight jQuery 3D Image Rotator Plugin - Carrousel

Carrousel is a cross-browser and high-performance jQuery plugin used to present your image in an automatic 3D rotator / carousel interface.

How to use it:

1. Include jQuery library and the jQuery Carrousel plugin's main script in the webpage.

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

2. Create a list of images and insert them together with the navigation buttons into a container named 'wrap'.

<div class="wrap" id="wrap">
  <div class="gg_left gg_btn"></div>
  <div class="gg_right gg_btn"></div>
  <ul class="wrap_ul">
    <li class="li_item"><img src="1.jpg"></li>
    <li class="li_item"><img src="2.jpg"></li>
    <li class="li_item"><img src="3.jpg"></li>
    <li class="li_item"><img src="4.jpg"></li>
    <li class="li_item"><img src="5.jpg"></li>
  </ul>
</div>

3. Initialize the plugin.

Carrousel.init($('#wrap'));

4. The required CSS styles:

ul, li { list-style: none; }

.wrap {
  width: 800px;
  height: 270px;
  position: relative;
  margin: 30px auto;
  overflow: hidden;
}

.gg_btn {
  overflow: hidden;
  cursor: pointer;
  position: absolute;
}

.gg_left { background: url(btn_l.png) no-repeat center center; }

.gg_right {
  background: url(btn_r.png) no-repeat center center;
  right: 0px;
}

.wrap ul {
  width: 800px;
  height: 270px;
}

.wrap ul li { position: absolute; }

5. All default configuration options.

var setting = {

    // width / height in pixels
    "width": 1000, 
    "height": 270,

    // width / height of the first image
    "firstPicWidth": 640,
    "firstPicHeight": 270, 

    // 0 ~ 1
    "scale": 0.9, 

    // animation speed
    "speed": 500,  

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

    // autoplay
    'autoPlay': true, 

    // autoplay interval
    'delay': 1000

};

Carrousel.init($("#wrap"),setting);

6. You can also pass the options via data-setting attribute on main wrapper.

<div class="wrap" id="wrap" 
     data-setting='{
      "width":1000,
      "heihgt":270,
      "firstPicWidth":640,
      "firstPicHeight":270,
      "scale":0.9,
      "speed":500
     }'
>

---

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