Hey guys! Welcome back to my JS series blogs. Please do check out my previous blog on Stack Data Structure implementation in js from below card.
In this write up we are going to see how to build the carousel/slider using the plain HTML, CSS, and Javascript. The simplest one!
What is Carousel/Slider?
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Content Source from Bootstrap.
How are we gonna build?
- We will have the Carousel container which holds the slides with previous and next icon.
- We will implement the function to show the slide one at a time.
- We will add the previous and next functionality to the carousel.
Carousel HTML & CSS
<div class="carouselContainer">
<div class="carouselImgs slide1">
<h1>Slide1</h1>
</div>
<div class="carouselImgs slide2">
<h1>Slide2</h1>
</div>
<div class="carouselImgs slide3">
<h1>Slide3</h1>
</div>
<div class="carouselImgs slide4">
<h1>Slide4</h1>
</div>
<span class="prev" id="prev"> < </span>
<span class="next" id="next"> > </span>
</div>
Styles
.carouselContainer {
width: 60%;
height: 60%;
margin: 0 auto;
position: relative;
background-color: #fff;
border-radius: 1.5rem;
overflow: hidden;
}
.carouselImgs {
width: 100%;
height: 100%;
animation: fade 1.5s;
display: none;
padding: 20px;
text-align: center;
align-items: center;
justify-items: center;
justify-content: center;
}
.prev, .next {
position: absolute;
top: 49%;
cursor: pointer
}
.prev { left: 10px; }
.next { right: 10px; }
.slide1 { background-color: #d8e2dc; }
.slide2 { background-color: #577399; }
.slide3 { background-color: #bdd5ea; }
.slide4 { background-color: #f7f7ff; }
//animation css for carousel children
@keyframes fade {
from { opacity: 0.4; }
to { opacity: 1; }
}
Function: Show
var currentSlide = 1;
function showSlide(slideIndex) {
const slides = document.getElementsByClassName('carouselImgs');
if (slideIndex > slides.length) { currentSlide = 1 }
if (slideIndex < 1) { currentSlide = slides.length }
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none'
}
slides[currentSlide - 1].style.display = 'flex'
}
- f the slideIndex exceeds the slides count we need to reset the currentSlide to 1.
- If the slideIndex becomes zero or lesser, reset the currentSlide to slides length.
- This resetting makes the previous and next actions to iterate through the existing slides like infinite.
Function: previous
function previousSlide() {
showSlide(currentSlide -= 1);
}
Function: next
function nextSlide() {
showSlide(currentSlide += 1);
}
Codepen
GitHub Page for demo here
For full code, please go to the below GitHub repo:
What are the more features that can be added?
- Automatic slide show based on the interval.
- Can disable the previous/next when the limit is reached.
- Images to the slides.
- Different animations on slide transition.
Top comments (0)