3D Image Slice Rotator With jQuery And CSS3 - Ali Slider

Ali Slider is a tiny jQuery plugin used to create an automatic image rotator/slider with a cool 3D slice animation based on CSS3 transforms and transitions.

How to use it:

1. Wrap your images into a DIV container with the CSS class of 'sliderlinks'.

<div class="sliderlinks">
  <img src="https://unsplash.it/400/300?image=319">
  <img src="https://unsplash.it/400/300?image=318">
  <img src="https://unsplash.it/400/300?image=317">
  <img src="https://unsplash.it/400/300?image=316">
  <img src="https://unsplash.it/400/300?image=315">
  <img src="https://unsplash.it/400/300?image=314">
</div>

2. Create slices / cuboids for the rotator.

<div class="slider">
  <div class="cube1 cube">
      <div class="face1 face"></div>
      <div class="face2 face"></div>
      <div class="face3 face"></div>
      <div class="face4 face"></div>
      <div class="face5 face"></div>
      <div class="face6 face"></div>
  </div>
  <div class="cube2 cube">
      <div class="face1 face"></div>
      <div class="face2 face"></div>
      <div class="face3 face"></div>
      <div class="face4 face"></div>
      <div class="face5 face"></div>
      <div class="face6 face"></div>
  </div>
  <div class="cube3 cube">
      <div class="face1 face"></div>
      <div class="face2 face"></div>
      <div class="face3 face"></div>
      <div class="face4 face"></div>
      <div class="face5 face"></div>
      <div class="face6 face"></div>
  </div>
  <div class="cube4 cube">
      <div class="face1 face"></div>
      <div class="face2 face"></div>
      <div class="face3 face"></div>
      <div class="face4 face"></div>
      <div class="face5 face"></div>
      <div class="face6 face"></div>
  </div>
  <div class="clear-fix"></div>
</div>

3. The core CSS/CSS3 styles.

.sliderlinks { display: none; }

.slider {
  margin: 100px auto;
  height: 300px;
  width: 400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 2000px;
  position: relative;
}

.slider .cube1, .slider .cube2, .slider .cube3, .slider .cube4 {
  height: 100%;
  width: 25%;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  position: relative;
  float: left;
  transition: all 1s ease-in-out;
}

.face {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.face img { transform: rotateX(0deg); }

.slider .face1 {
  height: 100%;
  width: 100%;
  background-color: brown;
  transform: translate3d(0, 0, 150px);
}

.slider .face2 {
  height: 100%;
  width: 100%;
  background-color: brown;
  transform: rotateX(90deg) translate3d(0, 0, 150px);
}

.slider .face3 {
  height: 100%;
  width: 100%;
  background-color: brown;
  transform: rotateX(-90deg) translate3d(0, 0, 150px);
}

.slider .face4 {
  height: 100%;
  width: 100%;
  background-color: brown;
  transform: rotateX(180deg) translate3d(0, 0, 150px);
}

.slider .face5 {
  height: 100%;
  width: 400%;
 //background-color: #2c72c3;
  transform: translateX(-50%)rotateY(90deg) translate3d(0, 0, 75px);
}

.slider .face6 {
  height: 100%;
  width: 400%;
 //background-color: #7d2cc3;
  transform: rotateY(90deg) translate3d(0, 0, -150px);
}

.cube1 .face1 img, .cube1 .face2 img, .cube1 .face3 img, .cube1 .face4 img { margin: 0; }

.cube2 .face1 img, .cube2 .face2 img, .cube2 .face3 img, .cube2 .face4 img { margin-left: -100%; }

.cube3 .face1 img, .cube3 .face2 img, .cube3 .face3 img, .cube3 .face4 img { margin-left: -200%; }

.cube4 .face1 img, .cube4 .face2 img, .cube4 .face3 img, .cube4 .face4 img { margin-left: -300%; }

4. Place jQuery library and the jQuery Ali Slider's script at the end of the document. That's it.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="javascript/Ali_Slider.js"></script>

---

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