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.
2. We will implement the function to show the slide one at a time.
3. We will add the previous and next functionality to the carousel.

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

Carousel/Slider

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

saravanakumarputta/js-snippets-carousel-slider

What are the more features that can be added?

1. Automatic slide show based on the interval.
2. Can disable the previous/next when the limit is reached.
3. Images to the slides.
4. Different animations on slide transition.

Credits: I learned from web.dev Instagram handle