Minimal 3D Perspective Image Carousel With jQuery And CSS3

Just another 3D perspective image slider/carousel that allows your users to rotate through an html list of images in a 3D space, implemented in jQuery and CSS/CSS3.

How to use it:

1. Import jQuery library and the core JavaScript file slider.js into the html document when needed.

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

2. Insert your images as a list into the 3D perspective slider.

<ul>
  <li class="left2">
    <img src="1.png">
  </li>
  
  <li class="left1">
    <img src="2.png">
  </li>

  <li class="active">
    <img src="3.png">
  </li>

  <li class="right1">
    <img src="4.png">
  </li>

  <li class="right2">
    <img src="5.png">
  </li>
  <li >
    <img src="6.png">
  </li>
  <li >
    <img src="7.png">
  </li>
</ul>

3. The core CSS/CSS3 styles for the 3D perspective slider.

ul {
  height: 400px;
  width: 225px;
  margin: 0 auto;
  list-style: none;
  position: relative;
}

ul li {
  cursor: pointer;
  position: absolute;
  transition: all 0.6s ease-in;
  opacity: 0;
  margin-top: 10px;
}

ul li img {
  width: 100%;
  cursor: pointer;
}

li.active {
  z-index: 999;
  opacity: 1;
}

li.left2 {
  transform: perspective(600px) translateX(-160%) rotateY(-40deg) scale(0.5);
  opacity: 1;
}

li.left1 {
  transform: translateX(-102%) scale(0.8);
  opacity: 1;
}

li.right1 {
  transform: translateX(102%) scale(0.8);
  opacity: 1;
}

li.right2 {
  transform: perspective(600px) translateX(160%) rotateY(40deg) scale(0.5);
  opacity: 1;
}

---

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