Minimal 3D Image Rotator with jQuery and CSS3 - Cascade Slider

Cascade Slider is a super lightweight jQuery plugin used for generating an image carousel slider that acts like a 3D rotator with navigation and pagination. Works on modern browsers which have CSS3 transform and transition support.

How to use it:

1. Build the html structure for the 3D image rotator and add your own images together with the navigation and pagination following the Html snippets like this:

<div class="cascade-slider_container" id="cascade-slider">
  <div class="cascade-slider_slides">
    <div class="cascade-slider_item">
      <h3>Pic 1</h3>
      <img src="1.jpg" alt="">
    </div>
    <div class="cascade-slider_item">
      <h3>Pic 2</h3>
      <img src="2.jpg" alt="">
    </div>
    <div class="cascade-slider_item">
      <h3>Pic 3</h3>
      <img src="3.jpg" alt="">
    </div>
  </div>

  <ol class="cascade-slider_nav">
    <li class="cascade-slider_dot cur"></li>
    <li class="cascade-slider_dot"></li>
    <li class="cascade-slider_dot"></li>
    <li class="cascade-slider_dot"></li>
    <li class="cascade-slider_dot"></li>
    <li class="cascade-slider_dot"></li>
  </ol>

  <span class="cascade-slider_arrow cascade-slider_arrow-left" data-action="prev">Prev</span>
  <span class="cascade-slider_arrow cascade-slider_arrow-right" data-action="next">Next</span>
</div>

2. The core CSS styles for the 3D rotator.

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

.cascade-slider_item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0.3);
  transition: all 1s ease;
  opacity: 0;
  z-index: -1;
}

.cascade-slider_item.next {
  left: 50%;
  transform: translateY(-50%) translateX(-150%) scale(0.6);
  opacity: 1;
  z-index: 1;
}

.cascade-slider_item.prev {
  left: 50%;
  transform: translateY(-50%) translateX(50%) scale(0.6);
  opacity: 1;
  z-index: 1;
}

.cascade-slider_item.now {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
}

3. Style the next / prev navigation and bottom pagination.

.cascade-slider_arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 5;
}

.cascade-slider_arrow-left { left: 0; }

.cascade-slider_arrow-right { right: 0; }

.cascade-slider_nav {
  position: absolute;
  bottom: -120px;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.cascade-slider_dot {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 1em;
  background: #ddd;
  list-style: none;
  cursor: pointer;
}

.cascade-slider_dot:hover { background: #555; }

.cascade-slider_dot.cur { background: #555; }

4. Include jQuery library and the jQuery Cascade Slider's JavaScript file at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="cascade-slider.js"></script>

5. Active the 3D rotator.

$('#cascade-slider').cascadeSlider();

6. You can change the default CSS selectors by passing the following options during initialization.

$('#cascade-slider').cascadeSlider({
  itemClass: 'cascade-slider_item',
  arrowClass: 'cascade-slider_arrow'
});

---

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