This is a simple and subtle project that can be put in a resume, It will help gain good expression among the recruiters. Also, it is a good project for developers to practice. You can use it on websites login/sign-up pages.
A Simple Carousel In HTML, CSS & JavaScript | User-Friendly Project |
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Carousel with the help of HTML, CSS & Javascript 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this Simple Carousel with javascript step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS & finally JS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have made a section for the carousel and divs for the items inside the carousel.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/luxonauta/luxa@latest/dist/compressed/luxa.css">
<main>
<section class="has-dflex-center">
<div class="lx-container-80">
<div class="lx-row">
<div class="lx-card carousel-container">
<div class="item fade">
<div class="image"><img src="https://bit.ly/34xczKy"/></div>
</div>
<div class="item fade">
<div class="image"><img src="https://bit.ly/3lkp5DW"/></div>
<div class="text is-text-left">
<h1 class="title"> <i class="far fa-hand-point-right"></i> This item has a title.</h1>
<p>This item has a caption, aligned to the left.</p>
</div>
</div>
<div class="item fade">
<div class="image"><img src="https://bit.ly/3iMHuI1"/></div>
<div class="text is-text-centered">
<p> <i class="fas fa-info-circle"></i> This item has a caption, aligned to the center.</p>
</div>
</div><a class="prev has-dflex-center"><i class="fas fa-angle-left"></i></a><a class="next has-dflex-center"><i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
</section>
</main>
After the HTML we will design the section, containers and items in the div.
CSS🎈( step - 2)
html,
body {
font-family: "Roboto", sans-serif;
}
body {
background-color: #fbab7e;
background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
}
main section {
width: 100%;
min-height: 100vh;
padding: 4rem 0;
}
main section .carousel-container {
width: 100%;
height: 40rem;
padding: 0;
position: relative;
overflow: hidden;
border-radius: 0.375rem;
}
main section .carousel-container .item {
width: 100%;
height: 100%;
position: relative;
display: none;
animation: fade 0.3s ease-in-out;
}
main section .carousel-container .item .numbertext {
padding: 0.5rem 0.75rem;
position: absolute;
top: 1rem;
right: 1rem;
border-radius: 0.9375rem;
font-size: 0.875rem;
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.9);
}
main section .carousel-container .item .image {
width: 100%;
height: 100%;
display: flex;
}
main section .carousel-container .item .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
main section .carousel-container .item .text {
width: 100%;
padding: 0.625rem 0.9375rem;
position: absolute;
bottom: 0;
font-size: 0.9rem;
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.9);
}
main section .carousel-container .item .text .title {
margin: 0.5rem 0 0 0;
font-size: 1.2rem;
font-weight: normal;
}
main section .carousel-container .prev,
main section .carousel-container .next {
width: 2rem;
height: 2rem;
padding: 0.3125rem;
position: absolute;
top: calc(50% - 1rem);
user-select: none;
font-size: 1rem;
color: #f2f2f2;
border-radius: 50%;
transition: 0.6s ease;
}
main section .carousel-container .prev:focus, main section .carousel-container .prev:hover,
main section .carousel-container .next:focus,
main section .carousel-container .next:hover {
background-color: rgba(0, 0, 0, 0.9);
}
main section .carousel-container .prev {
left: 0.8rem;
}
main section .carousel-container .next {
right: 0.8rem;
}
main section .carousel-container .dots {
padding: 0.9375rem;
display: flex;
align-items: center;
justify-content: center;
}
main section .carousel-container .dots .dot {
width: 0.625rem;
height: 0.625rem;
margin: 0 0.125rem;
display: inline-block;
cursor: pointer;
border-radius: 50%;
background-color: #bbb;
transition: background-color 0.6s ease;
}
main section .carousel-container .dots .dot:focus, main section .carousel-container .dots .dot:hover {
background-color: #717171;
}
@keyframes fade {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
Now we have done the CSS coding as well, now let's move to javascript.
JavaScript🎈( step - 3)
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".carousel-container").forEach(carousel => {
insertNumbers(carousel);
carousel.querySelector(".prev").addEventListener("click", e => {
minusItem(carousel);
});
carousel.querySelector(".next").addEventListener("click", () => {
plusItem(carousel);
});
insertDots(carousel);
carousel.querySelectorAll(".dot").forEach(dot => {
dot.addEventListener("click", e => {
let item = Array.prototype.indexOf.call(
e.target.parentNode.children,
e.target);
showItems(carousel, item);
});
});
showItems(carousel, 0);
});
});
function insertNumbers(carousel) {
const length = carousel.querySelectorAll(".item").length;
for (let i = 0; i < length; i++) {if (window.CP.shouldStopExecution(0)) break;
const nmbr = document.createElement("div");
nmbr.classList.add("numbertext");
nmbr.innerText = i + 1 + " / " + length;
carousel.querySelectorAll(".item")[i].append(nmbr);
}window.CP.exitedLoop(0);
}
function insertDots(carousel) {
const dots = document.createElement("div");
dots.classList.add("dots");
carousel.append(dots);
carousel.querySelectorAll(".item").forEach(elem => {
const dot = document.createElement("div");
dot.classList.add("dot");
carousel.querySelector(".dots").append(dot);
});
}
function plusItem(carousel) {
let item = currentItem(carousel);
carousel.
querySelectorAll(".item")[
item].nextElementSibling.classList.contains("item") ?
showItems(carousel, item + 1) :
showItems(carousel, 0);
}
function minusItem(carousel) {
let item = currentItem(carousel);
carousel.querySelectorAll(".item")[item].previousElementSibling != null ?
showItems(carousel, item - 1) :
showItems(carousel, carousel.querySelectorAll(".item").length - 1);
}
function currentItem(carousel) {
return [...carousel.querySelectorAll(".item")].findIndex(
item => item.style.display == "block");
}
function showItems(carousel, item) {
if (carousel.querySelectorAll(".item")[currentItem(carousel)] != undefined)
carousel.querySelectorAll(".item")[currentItem(carousel)].style.display =
"none";
carousel.querySelectorAll(".item")[item].style.display = "block";
if (carousel.querySelector(".dot.active") != null)
carousel.querySelector(".dot.active").classList.remove("active");
carousel.querySelectorAll(".dot")[item].classList.add("active");
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
creator of this project ()
.
.
If you found any value in this blog you can support me buy me a coffee.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.