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

File Size: 14.5 KB
Views Total: 30479
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
    <img src="img/left.png" class="left">
    <img src="img/right.png" class="right">

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

<script src="//"></script>
<script src="js/Carousel.js"></script>

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


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


  // 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.