3D Perspective Image Rotator with jQuery - PicCarousel.js

File Size: 419 KB
Views Total: 5755
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  <div class="poster-btn poster-next-btn"></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.


5. Possible options with default values.


  // width of the carousel

  // height of the carousel

  // width of the first slide

  // height of the first slide

  // scale

  // animation speed

  // enable autoplay

  // transition delay

  // vertical alignment

Change log:


  • bugfix

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