Carousels

What Are Carousels?

A carousel displays one item or group of items at a time from a larger set. Users move through the items with controls such as previous and next buttons, pagination dots, or sometimes autoplay.

Carousels can be useful, but they can also hide content, distract users, and create accessibility problems. Use one only when it helps the user browse a small set of related content.

Should You Use a Carousel?

Better Alternatives

Before choosing a carousel, consider whether a simpler pattern would serve users better.

Carousel Anatomy

Accessible Carousel Markup

Start with semantic markup and manual controls. Use real button elements for actions. Hide inactive slides with hidden so their links and buttons are not tabbable.

<section class="carousel" aria-label="Featured projects" aria-roledescription="carousel">
  <p class="carousel-status" aria-live="polite">Slide 1 of 3</p>

  <div class="carousel-slides">
    <article class="slide" aria-label="Slide 1 of 3">
      <img
        src="project-dashboard.webp"
        width="900"
        height="600"
        alt="Dashboard interface with charts and project cards"
      >
      <h2>Portfolio Dashboard</h2>
      <p>A responsive dashboard for tracking project progress.</p>
    </article>

    <article class="slide" aria-label="Slide 2 of 3" hidden>
      <h2>Course Landing Page</h2>
      <p>A landing page with pricing, testimonials, and enrollment CTA.</p>
    </article>

    <article class="slide" aria-label="Slide 3 of 3" hidden>
      <h2>Gallery Experience</h2>
      <p>An image-heavy project page with optimized media.</p>
    </article>
  </div>

  <button class="carousel-prev" type="button">Previous</button>
  <button class="carousel-next" type="button">Next</button>
</section>

Basic Carousel CSS

Keep dimensions stable so the page does not jump between slides. Make controls large enough for mouse, keyboard, and touch users.

.carousel {
  display: grid;
  gap: 1rem;
}

.slide img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.carousel-prev,
.carousel-next {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
}

.carousel button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 0.25rem;
}

Manual JavaScript First

Build manual previous and next behavior before adding autoplay. Users should always be able to control the carousel themselves.

const carousel = document.querySelector('.carousel');
const slides = [...carousel.querySelectorAll('.slide')];
const status = carousel.querySelector('.carousel-status');
const previousButton = carousel.querySelector('.carousel-prev');
const nextButton = carousel.querySelector('.carousel-next');
let currentIndex = 0;

function showSlide(index) {
  currentIndex = (index + slides.length) % slides.length;

  slides.forEach((slide, slideIndex) => {
    slide.hidden = slideIndex !== currentIndex;
  });

  status.textContent = 'Slide ' + (currentIndex + 1) + ' of ' + slides.length;
}

previousButton.addEventListener('click', () => {
  showSlide(currentIndex - 1);
});

nextButton.addEventListener('click', () => {
  showSlide(currentIndex + 1);
});

Pagination Buttons

Pagination buttons let users jump directly to a slide. Use aria-current="true" on the active pagination button.

<div class="carousel-pagination" aria-label="Choose slide">
  <button type="button" aria-current="true">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
</div>

Optional Autoplay Rules

Autoplay should be optional, easy to pause, and respectful of user motion preferences. Do not autoplay content users need to read carefully.

• Provide a pause/play button if slides advance automatically.
• Pause autoplay when the carousel receives keyboard focus.
• Pause autoplay on pointer hover.
• Use clearInterval when pausing or destroying autoplay.
• Do not autoplay when prefers-reduced-motion is set to reduce.

Autoplay with Guardrails

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let autoplayId;

function startAutoplay() {
  if (reduceMotion || autoplayId) return;

  autoplayId = setInterval(() => {
    showSlide(currentIndex + 1);
  }, 5000);
}

function stopAutoplay() {
  clearInterval(autoplayId);
  autoplayId = undefined;
}

carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('focusin', stopAutoplay);

Keyboard Behavior

• Tab should reach the carousel controls and any interactive content in the visible slide.
• Inactive slides should not contain tabbable links or buttons. Use hidden or manage focus carefully.
• Arrow key shortcuts are optional. Do not require them for basic use.
• Focus should not jump unexpectedly when the slide changes.
• The carousel should remain understandable if JavaScript fails.

Responsive and Image Guidance

• Use consistent image dimensions or aspect ratios to prevent layout shift.
• Give informative images meaningful alt text and decorative images empty alt="".
• Keep controls reachable on touch screens.
• Do not lock the carousel to a height that causes text overflow on small screens.
• Do not lazy-load the first visible slide image if it is above the fold.

Modern Library Option: Splide

Splide is a modern carousel library that works without jQuery. Use it when a project needs a polished carousel faster than you can build and test one from scratch.

The same rules still apply: keep controls visible, avoid autoplay by default, write useful slide content, and test keyboard, screen reader, motion, and responsive behavior.

A library can save time, but it does not make the carousel automatically accessible or appropriate for the page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css">

<section class="splide" aria-label="Featured projects">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Project 1</li>
      <li class="splide__slide">Project 2</li>
      <li class="splide__slide">Project 3</li>
    </ul>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>
<script>
  new Splide('.splide', {
    arrows: true,
    pagination: true,
    autoplay: false,
  }).mount();
</script>

Common Mistakes