In this web development tutorial we are going to build a completely responsive modern auto sliding carousel using HTML5 CSS3 Bootstrap 5 and JavaScript.
Donation!
Buy me a Coffee
Hi, if you like my content and you wish to give back you can buy me a Coffee!
$3.00
Buy me a Pizza
Hi, if you like my content and you wish to give back you can buy me a Pizza!
$7.00
Code for this video:
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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Modern carousel</title>
</head>
<body>
<div class="container mt-5">
<!--todo: title -->
<h1 class="display-1 text-center mb-5">modern carousel</h1>
<!-- todo: main container -->
<main class="row row-cols-sm-2 row-cols-1 m-auto">
<!-- todo: carousel -->
<div id="Carousel" class="carousel col">
<div class="carousel-inner rounded-2 shadow">
<div class="carousel-item">
<img
src="https://source.unsplash.com/SWGnzdIRQuU"
alt="..."
class="d-block w-100"
/>
</div>
<div class="carousel-item">
<img
src="https://source.unsplash.com/6FbArnPXEVg"
alt="..."
class="d-block w-100"
/>
</div>
<div class="carousel-item">
<img
src="https://source.unsplash.com/z3em1GBRhvY"
alt="..."
class="d-block w-100"
/>
</div>
<div class="carousel-item">
<img
src="https://source.unsplash.com/zUNs99PGDg0"
alt="..."
class="d-block w-100"
/>
</div>
<div class="carousel-item">
<img
src="https://source.unsplash.com/n49BjsFf5dI"
alt="..."
class="d-block w-100"
/>
</div>
</div>
<!-- todo: carousel controllers -->
<button class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- todo: captions -->
<ul id="captions" class="list-unstyled col">
<li
class="cap cap-active fs-3 p-3 my-3 rounded-2"
onclick="capSlide(0)"
>
<b>Accelerate your ideas</b> with premium templates
</li>
<li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(1)">
<b>Work faster and more</b> professionally by inviting your team to
work together
</li>
<li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(2)">
<b>Take designs to the next level</b> with animation, video, and
audio
</li>
<li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(3)">
<b>Market your business</b> with branding tools and merchandise
</li>
<li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(4)">
<b>Reach your audience</b> with social campaigns, supported by
content scheduling
</li>
</ul>
</main>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap");
body {
font-family: "Poppins", sans-serif;
}
/* .carousel-item {
display: block;
} */
.cap:hover {
cursor: pointer;
background-color: #f8f9f9;
}
.cap:active {
border-bottom: 2px solid #7d2ae8;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}
.cap-active {
position: relative;
background-color: #f8f9f9;
}
.cap-active b {
color: #7d2ae8;
}
.cap-active::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-bottom: 2px solid #7d2ae8;
width: 0%;
animation: linierRight 4.5s linear forwards;
}
@keyframes linierRight {
form {
width: 0%;
}
to {
width: 100%;
}
}
.carousel-item {
animation: fade 3s ease;
}
@keyframes fade {
0% {
opacity: 0.1;
filter: blur(2px);
}
100% {
opacity: 1;
}
}
JS
document.querySelector(".carousel-control-prev").onclick = () => plusSlide(-1);
document.querySelector(".carousel-control-next").onclick = () => plusSlide(1);
const slides = document.querySelectorAll(".carousel-item");
const caps = document.querySelectorAll(".cap");
// console.log(slides, caps);
let slideIndex = 1;
function plusSlide(n) {
showSlides((slideIndex += n));
}
function showSlides(n) {
let i;
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
let time = 1500;
let carouselLoop;
function autoLoopCarousel() {
carouselLoop = setInterval(() => {
plusSlide(1);
}, time * 3);
}
window.onload = () => {
showSlides(slideIndex);
autoLoopCarousel();
capCycle();
loopCaps();
};
function addClass(element, time) {
setTimeout(() => {
element.classList.add("cap-active");
}, time);
}
function removeClass(element, time) {
setTimeout(() => {
element.classList.remove("cap-active");
}, time);
}
const capCycle = () => {
addClass(caps[0]);
removeClass(caps[0], time * 3);
addClass(caps[1], time * 3);
removeClass(caps[1], time * 6);
addClass(caps[2], time * 6);
removeClass(caps[2], time * 9);
addClass(caps[3], time * 9);
removeClass(caps[3], time * 12);
addClass(caps[4], time * 12);
removeClass(caps[4], time * 15);
};
let capLoop;
function loopCaps() {
capLoop = setInterval(capCycle, time * 15);
}
function capSlide(n) {
showSlides((slideIndex = n));
}
Become a web development !
Check out my other courses on Web Development :
2 thoughts on “Build a Modern carousel using HTML CSS+Bootstrap and JavaScript”