Interactive Image Carousel

Problem Statement

Carousels and sliders are common layout elements for presenting landing page banners, ecommerce products, or photo galleries. Building a production-grade carousel is a common frontend interview task because it tests a developer's understanding of timer management, keyboard event handling, transition cycles, and component unmount states.

Your task is to build a responsive, interactive Image Carousel component in React. The carousel should loop through a collection of image URLs, provide interactive controls, support keyboard arrows, and auto-play slides at set intervals while pausing whenever the user hovers their mouse over the frame.

Requirements

Functional

• Slide Navigation:
  • Previous and Next buttons to manually switch slides.
  • Dot navigation indicators at the bottom to jump directly to any slide.
• Infinite Wrap-Around: Clicking "Next" on the last slide wraps around to the first slide; clicking "Previous" on the first slide wraps to the last slide.
• Autoplay & Hover Control:
  • Automatically advance to the next slide at a customizable interval (e.g. 3000ms).
  • Pause autoplay whenever the user's mouse hovers over the carousel frame (onMouseEnter), and resume it when the mouse leaves (onMouseLeave).
• Keyboard Control: Intercept keyboard presses when the carousel is focused. ArrowLeft must load the previous slide, and ArrowRight must load the next slide.

Non-Functional

• Ensure clean slide transition layouts.
• Add accessibility attributes (role="region", aria-label="Image Carousel", proper screen-reader roles for controls).
• Write cleanly structured CSS and Tailwind classes.

Concepts Tested

• Multi-state updates and active slide mapping.
• Managing side-effects and intervals with useEffect in React.
• Capturing native keyboard events.
• Mouse hover listeners (onMouseEnter / onMouseLeave).