Cross-browser 3D Carousel Plugin With jQuery - PictureSlider

Picture Slider is a tiny and cross-browser jQuery plugin used for rendering a 3D, auto-rotating carousel from an arbitrary list of images. Useful for presenting your post/featured images in a fashion way.

How to use it:

1. Just include both jQuery library and the Picture Slider plugin's script and we're ready to go.

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

2. Insert a list of images together with the next / prev navigation buttons into the carousel UI.

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

3. Add the following CSS snippets into your CSS file.

.poster-main {
  position: relative;
  width: 800px;
  height: 270px;
}

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

.poster-main .poster-list {
  width: 800px;
  height: 270px;
}

.poster-main .poster-list .poster-item {
  position: absolute;
  left: 0;
  top: 0;
}

.poster-main .poster-btn {
  position: absolute;
  top: 0;
  width: 100px;
  height: 270px;
  z-index: 10;
  cursor: pointer;
  opacity: 0.8
}

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

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

4. Initialize the carousel plugin and done.

Carousel.init($(".pictureSlider"));

5. Default carousel settings.

"width" : 1000, 
"height" : 270,
"posterWidth" : 640,
"posterHeight" : 270,
"scale" : 0.9, 
"speed" : 500,
"autoPlay" : false,
"delay" : 5000,
"verticalAlign" : "middle" //top bottom

6. You can also pass the options directly on the carousel wrapper.

<div class="pictureSlider poster-main" data-setting='{
    "width":1000,
    "height":270,
    "posterWidth":640,
    "posterHeight":270,
    "scale":0.8,
    "autoPlay":true,
    "delay":2000,
    "speed":300
}'>

---

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