Modern carousels greatly increase the visual appeal and user interaction of your website. It allows you to display multiple images in a modern and interactive way. Encourage visitors to explore further With modern web technology Creating a smooth image carousel with HTML, CSS, and JavaScript is easy. This project focused on how to achieve a smooth transition and responsive functionality. This ensures an engaging experience on the device.
Table Of Contents
Key Features Of Smooth Image Carousel
- Seamless Transitions: The carousel uses smooth transition animations. It provides beautiful visual effects.
- Responsive Design: Easily adjusts to different screen sizes. This ensures a great look on both desktop and mobile devices.
- Interactive Click Functionality: Clicking on each image causes its content to be highlighted. Make the carousel more interesting.
- Focus on interactive content: Each image has relevant content that users click through. to increase interactivity
- Modern Layout: The design uses flexible character and CSS properties, ensuring responsiveness without using old tricks.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>smooth image carousel</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- box one -->
<div class="box box1">
<div class="content">
<h2>family room</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit
cumque numquam doloribus eligendi accusamus ut incidunt culpa
sapiente repudiandae itaque harum, in minima fugiat cum voluptatum
aliquid minus ad dolor?
</p>
<button>book now</button>
</div>
</div>
<!-- box two -->
<div class="box box2">
<div class="content">
<h2>couple room</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit
cumque numquam doloribus eligendi accusamus ut incidunt culpa
sapiente repudiandae itaque harum, in minima fugiat cum voluptatum
aliquid minus ad dolor?
</p>
<button>book now</button>
</div>
</div>
<!-- box three -->
<div class="box box3">
<div class="content">
<h2>single room</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit
cumque numquam doloribus eligendi accusamus ut incidunt culpa
sapiente repudiandae itaque harum, in minima fugiat cum voluptatum
aliquid minus ad dolor?
</p>
<button>book now</button>
</div>
</div>
</div>
<!-- js file -->
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.container .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: clip-path 1s, z-index 0s 1s;
}
.container .box.box1 {
background: url("https://i.postimg.cc/fyyqTZPJ/hotel3.jpg");
background-size: 100% 100%;
background-position: cover;
background-repeat: no-repeat;
clip-path: polygon(0 0, 33% 0, 33% 100%, 0% 100%);
}
.container .box.box2 {
background: url("https://i.postimg.cc/jdG3Kp4S/hotel5.jpg");
background-size: 100% 100%;
background-position: cover;
background-repeat: no-repeat;
clip-path: polygon(33% 0, 67% 0, 67% 100%, 33% 100%);
}
.container .box.box3 {
background: url("https://i.postimg.cc/vB3SsD3J/hotel1.jpg");
background-size: 100% 100%;
background-position: cover;
background-repeat: no-repeat;
clip-path: polygon(67% 0, 100% 0, 100% 100%, 67% 100%);
}
.container .box.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
z-index: 1000;
transition: clip-path 1s, z-index 0s;
}
.container .box {
z-index: 100;
}
.container .box .content {
position: absolute;
left: 0;
bottom: -200%;
padding: 25px;
z-index: 10;
opacity: 0;
transition: all 1s;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
background-color: rgba(0, 0, 0, 0.6);
}
.container .box.active .content {
bottom: 0;
opacity: 1;
transition: all 1s;
transition-delay: 0.5s;
}
.container .box .content h2 {
font-size: calc(25px + 1.5vw);
text-transform: capitalize;
font-weight: 900;
color: mintcream;
}
.container .box .content p {
width: max(300px, 50%);
text-align: center;
color: mintcream;
}
.container .box .content button {
padding: 12px 25px;
border-radius: 5px;
background-color: mintcream;
text-transform: capitalize;
border: none;
color: #222222;
display: block;
width: fit-content;
cursor: pointer;
text-wrap: nowrap;
}
let boxes = document.querySelectorAll(".box");
boxes.forEach((box) =>
box.addEventListener("click", () => {
box.classList.toggle("active");
// Ensure only the active box has the highest z-index after the transition
if (box.classList.contains("active")) {
setTimeout(() => {
boxes.forEach((b) => {
if (b !== box) {
b.classList.remove("active");
}
});
}, 1000);
}
})
);
Code & Preview
You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
