Skip to main content
Back to Home

Carousel

An accessible carousel component with auto-play, keyboard navigation, and pause on hover/focus. Respects reduced motion preferences and provides proper ARIA markup.

Basic Usage

Navigate slides using controls, indicators, or keyboard. Auto-play pauses on hover/focus.

import { AccessibleCarousel } from '@a13y/react';

const slides = [
  <div key="1" className="h-64 bg-blue-500 flex items-center justify-center">
    <h2 className="text-white text-2xl">Slide 1</h2>
  </div>,
  <div key="2" className="h-64 bg-green-500 flex items-center justify-center">
    <h2 className="text-white text-2xl">Slide 2</h2>
  </div>,
  <div key="3" className="h-64 bg-purple-500 flex items-center justify-center">
    <h2 className="text-white text-2xl">Slide 3</h2>
  </div>
];

function Example() {
  return (
    <AccessibleCarousel
      items={slides}
      autoPlay
      interval={5000}
      controls
      indicators
    />
  );
}

Manual Navigation

Carousel with auto-play disabled for manual control.

Props

NameTypeDefaultDescription
items*ReactNode[]-Array of carousel slide content
autoPlaybooleanfalseEnable automatic slide rotation
intervalnumber5000Time in milliseconds between auto-rotation
controlsbooleantrueShow previous/next navigation controls
indicatorsbooleantrueShow slide position indicators
loopbooleantrueLoop back to first/last slide at edges
ariaLabelstring'Carousel'Accessible label for the carousel
classNamestring-Optional CSS class

Keyboard Navigation

←Previous slide
→Next slide
HomeFirst slide
EndLast slide

Accessibility Features

  • ✓Uses section with aria-roledescription="carousel"
  • ✓Each slide marked with role="group" and aria-roledescription="slide"
  • ✓Auto-play pauses on hover and focus
  • ✓Play/pause button with clear labels
  • ✓Respects prefers-reduced-motion for animations
  • ✓Screen reader announcements for slide changes