3D Rotating Image Carousel With jQuery And CSS3

This is a small jQuery and CSS3 based image carousel that comes with a subtle 3D rotation animation when transitioning between images. Also provides a progress bar control which indicates how many times left for next image rotation.

How to use it:

1. Code the html for the image carousel.

<div class="mySlider">
  <img src="1.jpg" alt="1" class="active" data-image="1">
  <img src="2.jpg" alt="2" data-image="2">
  <ul>
    <li><a href="#" class="active" data-link="1"></a></li>
    <li><a href="#" data-link="2"></a></li>
  </ul>
</div>

2. The core CSS/CSS3 styles for the image carousel.

.mySlider, img {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  position: relative;
  perspective: 1200px;
  display: block;
}

img {
  position: absolute;
  top: 0;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

img.active {
  transform-origin: 100% 50%;
  animation-name: imageIn;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  z-index: 1;
}

img.inactive {
  animation-name: imageOut;
  animation-duration: 800ms;
  animation-iteration-count: 1;
}

@keyframes 
imageOut {  to {
 transform: translateX(100%);
 filter: brightness(50%);
}
}

@keyframes 
imageIn {  from {
 filter: brightness(50%);
 transform: translateX(-100%) rotateY(-20deg);
 z-index: -1;
}
}

3. The CSS/CSS3 styles for the carousel controls.

ul {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  z-index: 2;
}

li { display: inline; }

li:not(:last-child) a { margin-right: 16px; }

a {
  display: block;
  position: relative;
  width: 70px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  float: left;
}

a:hover {
  transition: background-color 300ms;
  background-color: rgba(255, 255, 255, 0.6);
}

a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  transform-origin: center left;
  transform: scaleX(0);
}

a.active::before {
  animation-name: active;
  animation-duration: 4800ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

a.inactive::before {
  transition: opacity 800ms;
  opacity: 0;
}

@keyframes 
active {  0% {
 transform-origin: center left;
 transform: scaleX(0);
}
 45% {
 transform-origin: center left;
 transform: scaleX(1);
}
 65% {
 transform-origin: center right;
 transform: scaleX(1);
}
 100% {
 transform-origin: center right;
 transform: scaleX(0);
}
}

4. The image carousel requires the latest jQuery JavaScript library to work properly.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script> 

5. The JavaScript to activate the image carousel.

setInterval(function() {
  var $inactiveLink = $("[data-link]:not(.active)");
  var $inactiveImage = $("[data-image]:not(.active)");
  var $activeLink = $("[data-link].active");
  var $activeImage = $("[data-image].active");
  
  $activeImage.removeClass("active").addClass("inactive");
  $activeLink.removeClass("active").addClass("inactive");
  $inactiveImage.addClass("active").removeClass("inactive");
  $inactiveLink.addClass("active").removeClass("inactive");
}, 4800);

---

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