In this article, we going to learn how to make a carousel using plain HTML, CSS, and JavaScript without using any library framework. A carousel is a slideshow that contains a collection of rotating banners or images like the below image. Usually, you can see carousels on the home page of a website. It makes your website more attractive.
We gotta make 4 images carousel that can be controlled by buttons placed at bottom of the carousel. There is a text at the center of the carousel which is fixed and can't move with movement in the image. The images are moving after a fixed interval of user clicks.
We are using HTML as a basic structure for our carousel and CSS to decorate it. Below is the step-by-step procedure that we will be going to follow
Step 1: Place this HTML starting code in your HTML file
Starting section
<!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>Multiple Carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>
<body>
</body>
</html>Step 2: Next step is placing this HTML between the <body> tag
HTML Markup
<div class="carousel-container">
<div class="inner-carousel">
<div class="track">
<div class="card-container">
<div class="card card1"></div>
</div>
<div class="card-container">
<div class="card card2"></div>
</div>
<div class="card-container">
<div class="card card3"></div>
</div>
<div class="card-container">
<div class="card card4"></div>
</div>
<div class="card-container">
<div class="card card5"></div>
</div>
<div class="card-container">
<div class="card card6"></div>
</div>
<div class="card-container">
<div class="card card7"></div>
</div>
<div class="card-container">
<div class="card card8"></div>
</div>
<div class="card-container">
<div class="card card9"></div>
</div>
<div class="card-container">
<div class="card card10">1</div>
</div>
<div class="card-container">
<div class="card card11">1</div>
</div>
<div class="card-container">
<div class="card card12">12</div>
</div>
</div>
<div class="nav">
<button class="prev"><i class="bi bi-arrow-left-circle"></i></button>
<button class="next"><i class="bi bi-arrow-right-circle"></i></button>
</div>
</div>
</div>Step 3: Paste this CSS code to your CSS file
CSS Markup
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
.carousel-container {
width: 1100px;
margin: 50px auto;
position: relative;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #aaa;
}
@media (max-width: 768px) {
.carousel-container {
width: 95%;
}
}
.inner-carousel {
width: 100%;
height: 400px;
overflow: hidden;
}
.track {
display: inline-flex;
height: 100%;
transition: transform 0.2s ease-in-out;
}
.card-container {
width: 275px;
height: 400px;
flex-shrink: 0;
padding-right: 10px;
}
@media (max-width: 768px) {
.card-container {
width: 184px;
}
}
.card {
width: 100%;
height: 100%;
/*display: flex;
flex-direction: column;
justify-content: center;
align-items: center;*/
background-position: center bottom;
background-size: center;
background-repeat: no-repeat;
border-radius: 10px;
}
.card1 {
background-image: url("https://cdn.pixabay.com/photo/2018/08/21/23/29/fog-3622519_960_720.jpg");
}
.card2 {
background-image: url("https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_960_720.jpg");
}
.card3 {
background-image: url("https://cdn.pixabay.com/photo/2016/08/11/23/48/italy-1587287_960_720.jpg");
}
.card4 {
background-image: url("https://cdn.pixabay.com/photo/2014/08/29/03/02/horse-430441_960_720.jpg");
}
.card5 {
background-image: url("https://cdn.pixabay.com/photo/2014/12/08/17/52/mare-561221_960_720.jpg");
}
.card6 {
background-image: url("https://cdn.pixabay.com/photo/2017/02/08/17/24/butterfly-2049567_960_720.jpg");
}
.card7 {
background-image: url("https://cdn.pixabay.com/photo/2017/11/30/22/00/pumpkin-2989569_960_720.jpg");
}
.card8 {
background-image: url("https://cdn.pixabay.com/photo/2016/07/24/22/25/woman-1539416_960_720.jpg");
}
.card9 {
background-image: url("https://cdn.pixabay.com/photo/2017/11/15/09/28/music-player-2951399_960_720.jpg");
}
.card10 {
background-image: url("https://cdn.pixabay.com/photo/2018/02/23/04/38/laptop-3174729_960_720.jpg");
}
.card11 {
background-image: url("https://cdn.pixabay.com/photo/2016/03/09/09/30/woman-1245817_960_720.jpg");
}
.card12 {
background-image: url("https://cdn.pixabay.com/photo/2016/11/08/05/31/adorable-1807544_960_720.jpg");
}
.nav button {
position: absolute;
top: 50%;
transform: translatey(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
outline: none;
border: 1px solid #000;
cursor: pointer;
}
.nav .prev {
left: -30px;
display: none;
}
.nav .prev.show {
display: block;
}
.nav .next {
right: -30px;
}
.nav .next.hide {
display: none;
}Step 4: You need to paste this JavaScrip code in your file is already
Javascript Markup
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const carousel = document.querySelector(".carousel-container");
const track = document.querySelector(".track");
let width = carousel.offsetWidth;
let index = 0;
window.addEventListener("resize", function () {
width = carousel.offsetWidth;
});
next.addEventListener("click", function (e) {
e.preventDefault();
index = index + 1;
prev.classList.add("show");
track.style.transform = "translateX(" + index * -width + "px)";
if (track.offsetWidth - index * width < index * width) {
next.classList.add("hide");
}
});
prev.addEventListener("click", function () {
index = index - 1;
next.classList.remove("hide");
if (index === 0) {
prev.classList.remove("show");
}
track.style.transform = "translateX(" + index * -width + "px)";
});You done
Follow us: https://linktr.ee/reanfullstack