Building a Customizable and Accessible Carousel with Vanilla JavaScript

The Problem with Pre-Built Carousels

Carousels are a popular UI component used to display multiple items in a limited space. However, using pre-built carousel libraries can lead to code bloat and performance issues.

Why Build a Custom Carousel?

By building a custom carousel from scratch, we can avoid these issues and create a lightweight, flexible, and accessible solution that meets our specific needs.

Building the Carousel Structure

Let’s start by creating the basic HTML structure for our carousel:

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <button class="carousel-prev"><i class="fas fa-chevron-left"></i></button>
  <button class="carousel-next"><i class="fas fa-chevron-right"></i></button>
</div>

Adding JavaScript Functionality

Next, we’ll add the JavaScript code to make our carousel functional:

const carousel = document.querySelector('.carousel');
const inner = carousel.querySelector('.carousel-inner');
const items = inner.querySelectorAll('.carousel-item');
const prevButton = carousel.querySelector('.carousel-prev');
const nextButton = carousel.querySelector('.carousel-next');

let currentIndex = 0;

function navigate(direction) {
  // Update the current index
  currentIndex += direction;
  
  // Check bounds
  if (currentIndex < 0) {
    currentIndex = items.length - 1;
  } else if (currentIndex >= items.length) {
    currentIndex = 0;
  }
  
  // Update the carousel position
  inner.style.transform = `translateX(-${currentIndex * 100}%)`;
}

prevButton.addEventListener('click', () => navigate(-1));
nextButton.addEventListener('click', () => navigate(1));

Making the Carousel Accessible

To make our carousel accessible, we’ll add some additional attributes and keyboard navigation:

<button class="carousel-prev" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-next" aria-label="Next slide"><i class="fas fa-chevron-right"></i></button>

carousel.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') {
    navigate(-1);
  } else if (event.key === 'ArrowRight') {
    navigate(1);
  }
});

Customizing the Carousel

Finally, we can customize our carousel by adding additional styles and features:

.carousel {
  /* Add some basic styling */
  width: 800px;
  height: 600px;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  /* Make the inner container flexible */
  display: flex;
  flex-wrap: nowrap;
}

.carousel-item {
  /* Make each item take up the full width */
  flex-basis: 100%;
}

.carousel-prev,.carousel-next {
  /* Style the navigation buttons */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

We can also add additional features, such as autoplay, infinite scrolling, or touch support, by modifying the JavaScript code.

By building a custom carousel from scratch, we’ve created a lightweight, flexible, and accessible solution that meets our specific needs.