3D Perspective Image Carousel

Preview:

Description:

A pretty cool 3D carousel that enables the user to scroll through a list of images with different perspectives.

How to use it:

1. Add images to the carousel.

<div id="app" data-page="0">
  <div class="sliders">
    <div class="slide-left">
      &laquo;
    </div>
    <div class="slide-right">
      &raquo;
    </div>
  </div>
  <div class="row">
    <div class="image">
      <div class="box">
        <img src="assets/images/1.webp" >
      </div>
    </div>
    <div class="image">
      <div class="box">
        <img src="assets/images/2.jpg" >
      </div>
    </div>
    <div class="image">
      <div class="box">
        <img src="assets/images/3.jpeg" >
      </div>
    </div>
    ...
  </div>
</div>

2. The necessary CSS for the carousel & controls.

#app {
  display: flex;
  flex-flow: column nowrap;
  perspective: 350px;
}
.row {
  height: 15rem;
  display: flex;
  flex-flow: row nowrap;
  flex: 0;
  transition: all 1s cubic-bezier(0.85, 0, 0.15, 1);
  transform: rotate3d(-1,.5,0,-10deg) translateX(-0);
}
.row .image {
  height: 100%;
  box-shadow: 0 -5px 30px rgba(0,0,0,.3);
  cursor: pointer;
  position: relative;
  margin-right: 1rem;
}
.row .image:hover .box:after {
  opacity:1;
}
.row .image .box:after {
  content: '';
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.8));
}
.row .image:hover img {
  transform: scale(1.1);
}
.row .image .box {
  overflow: hidden;
  height: 100%;
  
}
.row .image .box img {
  height:15rem;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* slider controls */
.slide-left, .slide-right {
  position: fixed;
  cursor: pointer;
  height: 100vh;
  width: 100px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 5rem;
  transition: all 1s;
  z-index: 1000;
  user-select: none;
  top: 0;
}
.sliders .slide-left {
  background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.0));
  padding: 2rem;
  left: 0;
}
.sliders .slide-left:hover {
  background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.3));
}
.sliders .slide-right {
  background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.0));
  padding: 2rem;
  right: 0;
}
.sliders .slide-right:hover {
  background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.3));
}

3. The core JavaScript to enable the 3D perspective image carousel.

let app = document.getElementById('app');
let scrollAmount = document.body.clientWidth*1/3;
let rows = document.querySelectorAll('.row');
document.querySelector('.slide-right').addEventListener('click', (e) => {
    let currentPage = parseInt(app.getAttribute('data-page'));
    let targetPixel = (currentPage+1) * scrollAmount;
    for(let i = 0; i < rows.length; i++) {
        rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
    }
    app.setAttribute('data-page', currentPage+1);
})
document.querySelector('.slide-left').addEventListener('click', (e) => {
    let currentPage = parseInt(app.getAttribute('data-page'));
    let targetPixel = (currentPage-1) * scrollAmount;
    if(currentPage == 0) return;
    for(let i = 0; i < rows.length; i++) {
        rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
    }
    app.setAttribute('data-page', currentPage-1);
})
document.body.addEventListener('mousemove', (e) => {
    let mouseLocation = {
        x: e.clientX,
        y: e.clientY,
    }
})