Rotating Image Gallery Using HTML, CSS & JavaScript


Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Rotating Image Gallery" project using HTML, CSS & JavaScript. 

Preview 


In the above video, you’ve seen the preview of the "Rotating Image Gallery" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below. 

Rotating Image Gallery [Source Code] 

To get the following HTML, CSS & JS code for the Rotating Image Gallery project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document. 

Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.

You can also download all source code files from the given download button.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Image Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- The below images links are from picsum website -->

    <div class="image-container">
        <span style="--i: 1">
            <img src="https://picsum.photos/id/237/300/200">
        </span>
        <span style="--i: 2">
            <img src="https://picsum.photos/id/21/300/200">
        </span>
        <span style="--i: 3">
            <img src="https://picsum.photos/id/32/300/200">
        </span>
        <span style="--i: 4">
            <img src="https://picsum.photos/id/48/300/200">
        </span>
        <span style="--i: 5">
            <img src="https://picsum.photos/id/25/300/200">
        </span>
        <span style="--i: 6">
            <img src="https://picsum.photos/id/10/300/200">
        </span>
        <span style="--i: 7">
            <img src="https://picsum.photos/id/8/300/200">
        </span>
        <span style="--i: 8">
            <img src="https://picsum.photos/id/18/300/200">
        </span>
    </div>
    <div class="buttons">
        <button class="btn prev">Prev</button>
        <button class="btn next">Next</button>
    </div>

    <script src="index.js"></script>
</body>

</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
  overflow: hidden;
}

.image-container {
  position: relative;
  width: 200px;
  min-height: 200px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: all 1s ease-in-out;
}

.image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}

.image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.buttons {
  position: relative;
  width: 80%;
}

.btn {
  position: absolute;
  bottom: -80px;
  background-color: green;
  border: none;
  color: white;
  padding: 10px 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.5);
}

.btn:active {
  transform: scale(0.95);
}

.prev {
  left: 20%;
}

.next {
  right: 20%;
}
JavaScript
const imageContainerEl = document.querySelector(".image-container");
const prevEl = document.querySelector(".prev");
const nextEl = document.querySelector(".next");

let x=0;
let timer=0;

prevEl.addEventListener("click",()=>{
    x = x + 45;
    clearTimeout(timer);
    updateContainer();
})

nextEl.addEventListener("click",()=>{
    x = x - 45;
    clearTimeout(timer);
    updateContainer();
})

function updateContainer(){
    imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;

    timer = setTimeout(() => {
        x = x - 45;
        updateContainer();
    }, 2000);
}

updateContainer();
You have to wait 15 seconds.

Generating Download Link...

Post a Comment

Previous Post Next Post