3D Animated Image Slider With Vanilla JavaScript & HTML/CSS3

Preview:

Description:

This is a 3D animated image slider built with HTML, CSS/CSS3, and Vanilla JavaScript. Ideal for portfolios, product galleries, or photo albums.

When you click on the next or previous buttons, the current image flips in 3D to reveal the next or previous image on the reverse side.

Additionally, the background of the whole page changes to the current image with a subtle blur effect. This creates an immersive experience that pulls viewers into each image.

Ideal for portfolios, product galleries, or photo albums.

How to use it:

1. Add the initial background image to the page.

<img src="1.jpg" alt="Image 1" id="bgImage" class="bg-image" />
<div class="overlay"></div>

2. Add the image slider together with pagination and navigation controls to the page.

<div class="wrapper">
  <div id="card" class="card">
    <img
      src="1.jpg"
      alt=""
      id="imageFront"
      class="image front"
      />
    <img
      src="2.jpg"
      alt=""
      id="imageBack"
      class="image back"
      />
  </div>
  <button type="button" class="nav-btn back" onclick="back()">
    Previus Button Icon
  </button>
  <button type="button" class="nav-btn next" onclick="next()">
    Next Button Icon
  </button>
</div>
<div class="paginations"></div>

3. Copy the CSS styles below and paste them into the page.

/* background image & overlay */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
/* slider */
.wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  perspective: 1000px;
}
.wrapper .card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.8);
  transform: rotateY(0);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.wrapper .card .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  backface-visibility: hidden;
}
.wrapper .card .image.front {
  transform: rotateY(0);
}
.wrapper .card .image.back {
  transform: rotateY(180deg);
}
/* next/prev buttons */
.wrapper .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wrapper .nav-btn ion-icon {
  font-size: 3rem;
  color: #4191fa;
}
.wrapper .nav-btn.back {
  left: -60px;
}
.wrapper .nav-btn.next {
  right: -60px;
}
/* pagination bullets */
.paginations {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.paginations .pagi-btn {
  width: 4px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 50%;
  transition: 0.8s;
}
.paginations .pagi-btn.active {
  background: #4191fa;
}

4. The main script to activate the slider. Don’t forget to replace the images with your owns.

const bgImage = document.getElementById("bgImage");
const card = document.getElementById("card");
const imageFront = document.getElementById("imageFront");
const imageBack = document.getElementById("imageBack");
const paginations = document.querySelector(".paginations");
// replace images here
const images = [
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  // ...
];
let currentImageIndex = 0;
let previousImageIndex = currentImageIndex - 1;
let nextImageIndex = currentImageIndex + 1;
let currentRotation = 0;
imageFront.src = images[currentImageIndex];
imageBack.src = images[nextImageIndex];
bgImage.src = images[currentImageIndex];
images.forEach((image) => {
  const pagiBtn = document.createElement("div");
  pagiBtn.classList.add("pagi-btn");
  paginations.appendChild(pagiBtn);
});
function updatePaginations() {
  const pagiButtons = document.querySelectorAll(".pagi-btn");
  if (pagiButtons) {
    pagiButtons.forEach((pagiBtn, index) => {
      if (currentImageIndex - 2 === index || currentImageIndex + 2 === index) {
        pagiBtn.style.transform = "scale(1.5)";
      } else if (
        currentImageIndex - 1 === index ||
        currentImageIndex + 1 === index
      ) {
        pagiBtn.style.transform = "scale(2)";
      } else {
        pagiBtn.style.transform = "scale(1)";
      }
      if (currentImageIndex === index) {
        pagiBtn.classList.add("active");
        pagiBtn.style.transform = "scale(3)";
      } else {
        pagiBtn.classList.remove("active");
      }
    });
  }
}
updatePaginations();
function updateImages(index) {
  if (currentImageIndex % 2 === 0) {
    imageFront.src = images[index];
  } else {
    imageBack.src = images[index];
  }
  bgImage.src = images[currentImageIndex];
}
function next() {
  if (currentImageIndex !== images.length - 1) {
    nextImageIndex = currentImageIndex + 1;
    currentImageIndex++;
    updateImages(nextImageIndex);
    updatePaginations();
    currentRotation -= 180;
    card.style.transform = `rotateY(${currentRotation}deg)`;
  }
}
function back() {
  if (currentImageIndex !== 0) {
    previousImageIndex = currentImageIndex - 1;
    currentImageIndex--;
    updateImages(previousImageIndex);
    updatePaginations();
    currentRotation += 180;
    card.style.transform = `rotateY(${currentRotation}deg)`;
  }
}