JS:Snippets — Carousel/Slider using plain HTML, CSS and JS

Hey guys! Welcome back to my JS series blogs. Please do check out my previous blog on Stack Data Structure implementation in js here

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?

  1. We will have the Carousel container which holds the slides with previous and next icon.

Carousel HTML & CSS

//Element Structure
<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>//css
.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'
}

If 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

Thanks to codepen.io

GitHub Page for demo

For full code, please go to the below GitHub repo:

What are the more features that can be added?

  1. Automatic slide show based on the interval.

Credits: I learned from web.dev Instagram handle

--

--

Freelancer — Javascript Full-Stack developer EX-Zomentum || EX-ZOHO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SARAVANA KUMAR PS

Freelancer — Javascript Full-Stack developer EX-Zomentum || EX-ZOHO