Build an Image Carousel with Infinite Loop & Swipe

Question

Accepted Answer

**Requirements**
- Show one slide at a time (or 1.2 peeking); arrows wrap infinitely (0 → last, last → 0) with smooth translate.
- Dots indicate active slide; click to jump. Autoplay every 3s, pause on hover/focus and when tab hidden.
- Touch swipe: drag threshold 40px to advance; spring animation.
- Keyboard ←/→, `aria-live` for screen readers.

**Architecture**
- Index state `i`; display via `transform: translateX(-i*100%)` on track `display:flex`.
- Infinite: clone first/last or use modulo math with transition disabled on wrap (`transition: none` then re-enable).
- Autoplay: `useEffect` with `setInterval` that respects `document.hidden` and `isHovered` ref; cleanup on unmount.
- Swipe: `pointerdown/move/up` compute `dx`; if `|dx|>40` commit, else snap back.

**What interviewers look for:** modulo wrap, transition toggle for seamless loop, interval cleanup + visibility, pointer gestures, a11y.

**Reference implementation**
```jsx
export function Carousel({ images, autoPlay = 3000 })

Build an Image Carousel with Infinite Loop & Swipe

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.