Build an Image Carousel with Infinite Loop & Swipe

Q: Build an Image Carousel with Infinite Loop & Swipe

**Target Audience:** Frontend candidates who can already build a basic carousel and now face the "make it feel native" follow-up. Assumes React hooks; pointer events, transitions and the tricks are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain words, then tagged with 📌 Interview term: . This doc assumes the fundamentals of [the basic image carousel](/interview-question/build-an-image-carousel) (wrap-around, autoplay with cleanup, pause on hover and `:focus-visible`, carousel ARIA) and only re-explains them where they change. The output in section 6 was produced on React 19.3.1 in jsdom and in headless Chromium 141. ## 1. Why This Even Matters — A Story First Think of a merry-go-round. However many times it turns, horse 1 always comes after horse 8; it never stops and reverses through all the horses to get back to the start. A basic carousel does reverse: from slide 5, "next" animates `translateX(-400%)` back to `

The problem

Question presented to candidate: "You already know a basic carousel. Now make ours feel native: it must loop forever in one direction, so going from the last photo to the first slides forward instead of rewinding across every photo. Users on phones should be able to drag the photo with a finger and have it follow, then commit or snap back on release. Keep the arrows, dots, keyboard and a 3-second autoplay that pauses on hover, focus, while dragging and when the tab is hidden."

Requirements:

One slide visible; the track is [clone of last, ...slides, clone of first] and moves with translateX.
Next from the last slide animates onto the clone of the first, then jumps silently (transition off) to the real first slide; the same in reverse.
Pointer drag (mouse, pen, touch) moves the track 1:1; release beyond 40px commits to the neighbour, otherwise it springs back.
Clicks during a running transition are ignored; arrows, dots and Left / Right keys still work.
Autoplay every 3 s, paused on hover, keyboard focus, while dragging and while document.hidden; a Pause button.

What a strong answer should cover:

Why the naive index % n track rewinds, and how cloned edge slides plus a silent jump on transitionend hide it.
Toggling transition: none for the jump, forcing a reflow so the browser does not animate it, and a timeout fallback because transitionend never fires with reduced motion (no transition runs) or when a transition is cancelled.
A transition lock so rapid clicks cannot run past the clones.
Pointer Events with setPointerCapture, touch-action: pan-y so vertical page scroll still works, a distance threshold, and not hijacking clicks on the arrow buttons.
Page Visibility API for autoplay, clones hidden from screen readers (aria-hidden, empty alt).

Clarifying questions expected:

"Is a 40px threshold right, or should a fast flick with a short distance also count (velocity)?"
"Should autoplay resume after a swipe, or stop once the user takes control?"
"Do we need peeking neighbours (slides narrower than the viewport) or exactly one slide?"

Code / implementation expected: Yes. A working carousel with cloned edges, the silent jump, pointer swipe and autoplay with all pause conditions.

React
Carousel
Animation
Gestures

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 who can already build a basic carousel and now face the "make it feel native" follow-up. Assumes React hooks; pointer events, transitions and the tricks are explained from zero. Difficulty: Medium

How to read this doc: Each idea is explained in plain words, then tagged with 📌 Interview term:. This doc assumes the fundamentals of the basic image carousel (wrap-around, autoplay with cleanup, pause on hover and :focus-visible, carousel ARIA) and only re-explains them where they change. The output in section 6 was produced on React 19.3.1 in jsdom and in headless Chromium 141.

1. Why This Even Matters — A Story First

Think of a merry-go-round. However many times it turns, horse 1 always comes after horse 8; it never stops and reverses through all the horses to get back to the start. A b

The solution is hidden so you can try first

14 min read · 10 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 InfiniteCarousel from "./src/components/InfiniteCarousel";
import { slides } from "./src/data/slides";

export default function App() {
  return (
    <main className="app">
      <h1>Infinite carousel with swipe</h1>
      <InfiniteCarousel
        slides={slides}
        interval={3000}
        label="Featured photos"
      />
      <p className="hint">
        Drag or swipe the photo, use the arrows, dots or Left / Right keys. It
        never rewinds.
      </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.