Building a Custom Carousel Slider with Vanilla Javascript and Css

by

Creating a custom carousel slider can enhance the visual appeal of your website and improve user engagement. Using vanilla JavaScript and CSS allows for full control over the design and functionality, without relying on third-party libraries. In this tutorial, we’ll walk through the steps to build a simple, responsive carousel slider from scratch.

Understanding the Basic Structure

The carousel consists of three main parts: the container, the slides, and navigation controls. The container holds all slides, which are arranged horizontally. Navigation buttons allow users to move between slides. We’ll style these elements with CSS and add interactivity with JavaScript.

Start with a simple HTML structure. The <div> with class carousel is the main container. Inside, each slide is a <div> with class slide. Navigation buttons are placed outside the slides.

Here’s the basic HTML:

<div class="carousel">
  <div class="slides">
    <div class="slide">Slide 1 Content</div>
    <div class="slide">Slide 2 Content</div>
    <div class="slide">Slide 3 Content</div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

Styling with CSS

Apply CSS to make the carousel responsive and visually appealing. The key is to set the container to hide overflow and arrange slides horizontally using Flexbox.

/* Carousel container */
.carousel {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}

/* Slides wrapper */
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Individual slide */
.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
  font-size: 24px;
}

/* Navigation buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

Adding JavaScript Functionality

JavaScript will handle the slide transitions when users click the navigation buttons. We will track the current slide index and update the transform property accordingly.

const slides = document.querySelector('.slides');
const totalSlides = document.querySelectorAll('.slide').length;
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentIndex = 0;

function updateSlide() {
  slides.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  updateSlide();
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlide();
});

Final Tips

To improve your carousel, consider adding indicators, autoplay functionality, or touch support. Always test responsiveness on different devices to ensure a seamless user experience. Building your own slider gives you flexibility to customize it exactly to your needs.