322. Carousel Slider

Build an accessible Carousel Slider component in React with previous/next controls, indicator dots, keyboard support, and optional autoplay. Implement a reusable carousel that can render any slide content, loop correctly, and remain stable under rapid interactions.

Requirements

1. Core Navigation

• Render one active slide at a time
• Previous and Next controls wrap around at boundaries
• Dot indicators reflect active slide and allow direct navigation

2. Keyboard + Accessibility

• Left/Right arrows move slides
• Home jumps to first slide, End jumps to last slide
• Announce active slide position (e.g., "Slide 2 of 5")
• Buttons must have clear labels

3. Optional Autoplay

• Support autoplay and intervalMs props
• Pause autoplay on hover and focus
• Resume autoplay on mouse leave / blur

4. Robustness

• Handle empty slides and single slide gracefully
• Avoid interval leaks when component unmounts
• Ensure controls do not break with rapid clicks

Data Contract

interface CarouselSlide {
  id: string;
  title: string;
  description: string;
  imageUrl: string;
}

interface CarouselProps {
  slides: CarouselSlide[];
  autoplay?: boolean;
  intervalMs?: number;
}