Simplest 3D Image Carousel Plugin For jQuery - Carousel.js

A dead simple, unobtrusive, cross-browser jQuery carousel plugin for cycling automatically through a list of images like a 3D rotator.

How to use it:

1. Create a list of image you want to present in the 3D carousel.

<div class="container" id="container">
  <ul>
    <li>
      <img src="1.jpg">
    </li>
    <li>
      <img src="2.jpg">
    </li>
    <li>
      <img src="3.jpg">
    </li>
    </li>
    <img src="img/left.png" class="left">
    <img src="img/right.png" class="right">
  </ul>
</div>

2. Download and include the jQuery Carousel.js plugin after you've included jQuery library.

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

3. Just call the Carousel method on top container and we're done.

$('.container').carousel();

4. Config the 3D carousel with the following options.

$('.container').carousel({

  // the number of images to display
  num: 3, 

  // max width of the active image
  maxWidth: 250,

  // min width of the active image
  maxHeight: 150, 

  // enable auto play
  autoPlay: true,

  // autoplay interval
  showTime: 1000,

  // animation speed
  animationTime: 300,

  // 0.0 - 1.0
  scale: 0.8,

  // the distance between images
  distance: 50
  
});

---

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