jQuery 3D Cube Slider with CSS3

jquery.cubeSlider plugin which converts the DIV menu into a automatic 3D slider/rotator with CSS3 animations.

3d slider jquery, jquery carousel slider circular, responsive 3d slider, jquery plugin examples, easy jquery plugins

How to make use of it:

1. Download the latest version of the JQUERY and jquery.cubeSlider 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. CSS / CSS3 patterns required.

* {
  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. Enabling 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,
  
});

3d cube slider with jquery, jquery.cubeSlider Plugin/Github