3D Perspective Image Rotator with jQuery - PicCarousel.js

PicCarousel.js is a simple, CSS-less jQuery plugin that helps you create a 3D perspective image rotator (carousel) for showcasing your favorite images.

How to use it:

1. Download and include the jQuery PicCarousel.js script after loading jQuery library.

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

2. Insert a list of images with next / prev navigation buttons into the webpage.

<div class="poster-main example">
  <div class="poster-btn poster-prev-btn"></div>
  <ul class="poster-list">
    <li class="poster-item"><img src="1.jpg"></li>
    <li class="poster-item"><img src="2.jpg"></li>
    <li class="poster-item"><img src="3.jpg"></li>
    <li class="poster-item"><img src="4.jpg"></li>
    <li class="poster-item"><img src="5.jpg"></li>
  </ul>
  <div class="poster-btn poster-next-btn"></div>
</div>

3. A little CSS to style the image rotator.

.poster-main {
  width: 1000px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

.poster-main a, .poster-main img { display: block; }

.poster-main .poster-list {
  width: 1000px;
  height: 500px;
}

.poster-main .poster-list .poster-item {
  width: 200px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
}

.poster-main .poster-btn {
  position: absolute;
  top: 0;
  z-index: 10;
  cursor: pointer;
}

.poster-main .poster-prev-btn {
  left: 0;
  background: url(../img/left.png) no-repeat center center;
}

.poster-main .poster-next-btn {
  right: 0;
  background: url(../img/right.png) no-repeat center center;
}

4. Initialize the plugin and we're ready to go.

$(".example").PicCarousel("init");

5. Possible options with default values.

$(".example").PicCarousel({

  // width of the carousel
  "width":1000,

  // height of the carousel
  "height":300,

  // width of the first slide
  "posterWidth":520,

  // height of the first slide
  "posterHeight":300, 

  // scale
  "scale":0.9,

  // animation speed
  "speed":300, 

  // enable autoplay
  "autoPlay":false, 

  // transition delay
  "delay":500, 

  // vertical alignment
  "verticalAlign":"middle"
  
});

Change log:

2016-05-26

• bugfix

---

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