Build an Image Carousel | Interview Question

Q: Build an Image Carousel

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (`useState`, props, event handlers); timers, ARIA and CSS transforms are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea comes in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary interviewers use. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom, and in headless Chromium 141 for the parts jsdom cannot do. ## 1. Why This Even Matters — A Story First Picture a shop window with one big poster frame. A clerk swaps the poster every few seconds so passers-by see all the promotions. Now picture a customer who stops to read the small print: a good clerk waits; a bad clerk swaps the poster mid-sentence. And if someone asks "please stop changing it", the clerk must stop. A carousel is that frame. The data is a list of images; the screen shows one. The interesting parts are

The problem

Question presented to candidate: "Build the photo carousel for our home page: one photo at a time, previous and next arrows that wrap around at the ends, dots to jump to any photo, and autoplay every three seconds. Autoplay must pause while the user is hovering or using the keyboard inside it, and there has to be a way to stop it. Make it keyboard accessible."

Requirements:

Show one slide at a time from an array of images; a sliding CSS transition between slides.
Previous / next buttons that wrap (last to first, first to last) and one dot per slide that jumps to it.
Left / Right arrow keys (and Home / End) when the carousel has focus.
Autoplay every 3 s; pauses on hover and on keyboard focus inside; a Play / Pause button stops it for good.
Visible "2 / 5" status and correct ARIA for the carousel and its slides.

What a strong answer should cover:

Index wrap-around with ((i % n) + n) % n, so -1 becomes the last slide.
One source of truth (index) and derived values (running = playing && !hovered && !focused) instead of duplicated flags.
Timer cleanup: a timeout or interval cleared when the slide changes, when paused, and on unmount; no stale closures.
Accessibility: aria-roledescription="carousel" and "slide", labels like "2 of 5", hidden slides marked aria-hidden, a pause control (WCAG 2.2.2), and aria-live off while rotating, polite when paused.
The transform-based track (translateX(-index * 100%)) and prefers-reduced-motion.

Clarifying questions expected:

"Should autoplay restart after the user leaves the carousel, or stay stopped once they interact?"
"Do we need swipe on touch devices or an infinite (no rewind) animation?"
"How many images, and should off-screen ones be lazy-loaded?"

Code / implementation expected: Yes. A working carousel component with arrows, dots, keyboard support, autoplay with pause, and cleanup of the timer.

React
Timers
UI

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Assumes basic React (useState, props, event handlers); timers, ARIA and CSS transforms are explained from zero. Difficulty: Medium

How to read this doc: Each idea comes in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary interviewers use. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom, and in headless Chromium 141 for the parts jsdom cannot do.

1. Why This Even Matters — A Story First

Picture a shop window with one big poster frame. A clerk swaps the poster every few seconds so passers-by see all the promotions. Now picture a customer who stops to read the small print: a good clerk waits; a bad clerk swaps the poster mid-sentence. And if someone asks "please stop changing it", the clerk must stop.

A carousel is tha

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Carousel from "./src/components/Carousel";
import { slides } from "./src/data/slides";

export default function App() {
  return (
    <main className="app">
      <h1>Image carousel</h1>
      <Carousel slides={slides} interval={3000} label="Featured photos" />
      <p className="hint">
        Arrows, dots or the Left / Right keys move; hover or focus pauses
        autoplay.
      </p>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.