DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Saravana Kumar Putta Selvaraj
Saravana Kumar Putta Selvaraj

Posted on

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 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>
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:

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)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post