DEV Community

Saravana Kumar Putta Selvaraj
Saravana Kumar Putta Selvaraj

Posted on

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

#javascript #html #css #carousel

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.

saravanakumarputta

JS:DS - Stack Data Structure in JavaScript

Saravana Kumar Putta Selvaraj ・ Jun 1 '20

#javascript #datastructure #jsds

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>
Enter fullscreen mode Exit fullscreen mode

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; } }
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode
  • 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); }
Enter fullscreen mode Exit fullscreen mode

Function: next 

function nextSlide() { showSlide(currentSlide += 1); }
Enter fullscreen mode Exit fullscreen mode

Codepen

GitHub Page for demo here

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

GitHub logo saravanakumarputta / js-snippets-carousel-slider

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.
Credits: I learned from web.dev Instagram handle

Top comments (0)