3D Cube Slider Plugin with jQuery and CSS3 - cubeSlider

cubeSlider is a very small jQuery plugin that turns a list of DIV elements into an automatic 3D slider / rotator with CSS3 animations.

See also:

• Animated 3D cube Slider with jQuery and CSS3
• Simple 3D Flipping cube Slideshow with jQuery and CSS3 - BoxRoll Slider

How to use it:

1. Load the latest version of jQuery and jQuery cubeSlider plugin in the document.

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

2. Create a list of DIV elements for the cube slider.

<ul class="demo">
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
  <li><div>4</div></li>
</ul>

3. The required CSS / CSS3 styles.

* {
  margin: 0;
  padding: 0;
}

.demo > li {
  float: left;
  list-style-type: none;
  position: absolute;
  opacity: 0.6;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  text-align: center;
  color: #fff;
  font-size: 70px;
  cursor: pointer;
}

.demo {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  -webkit-transform: rotateY(-10deg) rotateX(-20deg);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 400px;
  position: relative;
}

.demo > li > div {
  background: #F44336;
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
}

4. Enable the plugin.

$('.demo').polygon(OPTIONS);

5. Default options.

$('.demo').polygon({

  // width of the cube slider
  width: 100,

  // height of the cube slider
  height: 100,

  // autoplay interval
  timer: false,
  
});

Change log:

2015-07-21

• bugfix

---

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