3d Image Slider using HTML and CSS

3d Image Slider using HTML and CSS

Do you want to make 3d Image Slider? Then follow this 3D Image Slider Design using HTML and CSS.
 
You must have seen slideshows in many places on many websites. Which enhances the structure and quality of the site. Earlier I made different types of image slideshows and sliders. Some designs can change the image automatically. In some cases, the manual image has to be changed. I have made this design a little more modern. It is basically a cube 3D image slider in HTML. Here we have added four images to the four sides of the cube.

3d Image Slider using HTML and CSS

3d Image Slider using HTML CSS and JavaScript

In this tutorial below you will learn how to create a 3D Cube Image Slider. There are two navigation buttons to change the images in this design. If you know basic HTML and CSS then you can easily create this project. Here I have designed it using HTML and CSS and implemented the image change with the help of JavaScript.

First I created a box using HTML and CSS. Then I added four images on each side. Also made two navigation buttons here. Using JavaScript’s click function at the end of it all, I have arranged to rotate this up to a 360-degree angle. When you click on that navigation button, the cube slider will rotate 90 along the y-axis.

See the Pen
3D Cube Slider by Foolish Developer (@fghty)
on CodePen.

Hopefully, the live demo above has helped you. Above you will get the required source code. Also below the article, you will find the complete source code in this download button.

Step 1: Basic structure of image slider

 This has created the basic structure of the 3D image slider using the following HTML and CSS code. Here I have used the background color of the web page light blue and the width and height of the cube: 300px.

<div class=”wrapper”>
  <div class=”container”>
     <div class=”image-cube”>
    </div>
  </div>
</div>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #9cd2d8;
}
.wrapper {
  border: 1px solid #ffffff;
  height: 300px;
  width: 300px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: 50%;
}
.image-cube {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  position: relative;
  transition: 2s;
}
Basic structure of image slider

Step 2: Add images to the slider 

Now using the following HTML code I have added the required images in this slider. Here we have basically used four images for the four sides of the cube. I have made the images equal to the size of a cube. I have arranged the four images used here at a 90-degree angle with each other to form a cube.

 <div class=”front”>
      <img src=”1.jpg” />
 </div>
 <div class=”right”>
      <img src=”2.jpg” />
 </div>
 <div class=”back”>
      <img src=”3.jpg” />
 </div>
 <div class=”left”>
     <img src=”4.jpg” />
 </div>
.image-cube div {
  height: 300px;
  width: 300px;
  position: absolute;
}
img {
  width: 100%;
  transform: translateZ(0);
}
.front {
  transform: translateZ(150px);
}
.right {
  transform: rotateY(-270deg) translateX(150px);
  transform-origin: 100% 0;
}
.back {
  transform: translateZ(-150px) rotateY(180deg);
}
.left {
  transform: rotateY(270deg) translateX(-150px);
  transform-origin: 0 50%;
}
Add images to the slider

 Step 3: Create two buttons to change the image

Now it’s time to create two buttons. These buttons will help to change the image. I have used one icon for each of the two buttons and I have used font-size: 20px to increase the size of the icon. Border-radius: 20px is used to make the button slightly round.

 <div class=”btns”>
    <button id=”prev”>
       <i class=”fas fa-arrow-left”></i>
    </button>
    <button id=”next”>
       <i class=”fas fa-arrow-right”></i>
    </button>
 </div>
.btns {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.btns button {
  background-color: transparent;
  color: #ffffff;
  border: 3px solid #ffffff;
  background: #0a3342;
  padding: 8px 40px;
  border-radius: 20px;
  font-size: 20px;
  cursor: pointer;
}
Create two buttons to change the image

Step 4: Activate the 3d Image Slider using JavaScript

Above we have designed this perfect. Now is the time to implement the 3D Cube Image Slider with the help of JavaScript. First I set one of the three ID functions to be constant. Here is a constant of cube and navigation buttons.

Then we have set the position 0 here, which means that under normal conditions this slider will be at zero degrees angle.

let cube = document.querySelector(“.image-cube”);
let btnNext = document.getElementById(“next”);
let btnPrev = document.getElementById(“prev”);
let pos = 0;

 Now I have executed the Next button using JavaScript below. When you click on the Next button, the cube will rotate 90 degrees. I used transform = rotateY to do this rotation. Which helps to rotate something along the y-axis. This causes it to rotate 90 degrees along the y-axis whenever you click on the Next button. As a result, we get to see the second image.

btnNext.addEventListener(“click”, () => {
  pos -= 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});

 Now using these codes I have implemented the previous button. When you click on the Previs button, the slider moves back to 90 degrees.

btnPrev.addEventListener(“click”, () => {
  pos += 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});
Activate the 3d Image Slider using JavaScript

Now use the 3d cube image slider in HTML to change the fully created image. Hope you know how I designed this 3d image slider using HTML and CSS. If there is any problem, you can let me know by commenting directly on my Instagram.