A carousel is simple state — currentIndex — but interviewers grade autoplay hygiene, accessibility, and the interaction surface.

Core implementation

function Carousel({ images, autoPlay = true, interval = 4000 }) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);

  const go = (i) => setIndex((i + images.length) % images.length); // wrap
  const next = () => go(index + 1);
  const prev = () => go(index - 1);

  // autoplay — pause on hover/focus, clean up the timer
  useEffect(() => {
    if (!autoPlay || paused) return;
    const id = setInterval(next, interval);
    return () => clearInterval(id);
  }, [autoPlay, paused, index, interval]);

  return (
    <div
      role="region" aria-roledescription="carousel" aria-label="Gallery"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      onKeyDown={(e) => {
        if (e.key === "ArrowRight") next();
        if (e.key === "ArrowLeft") prev();
      }}
    >
      <div style={{ transform: `translateX(-${index * 100}%)`, transition: "transform .3s" }}>
        {images.map((src, i) => (
          <img key={src} src={src} loading={i === index ? "eager" : "lazy"}
               aria-hidden={i !== index} alt={`Slide ${i + 1}`} />
        ))}
      </div>
      <button onClick={prev} aria-label="Previous slide">‹</button>
      <button onClick={next} aria-label="Next slide">›</button>
      <div role="tablist">
        {images.map((_, i) => (
          <button key={i} aria-label={`Go to slide ${i + 1}`}
                  aria-selected={i === index} onClick={() => go(i)} />
        ))}
      </div>
    </div>
  );
}

What's being graded

• Index management — wrap (% length) or clamp; dots jump directly.
• Autoplay hygiene — setInterval in an effect with cleanup; pause on hover and focus (and ideally when the tab is hidden / prefers-reduced-motion). An autoplay carousel you can't pause is an accessibility failure.
• Slide animation — animate transform: translateX (composite-only, GPU, smooth), not left.
• Keyboard support — arrow keys.
• Touch / swipe — pointer events tracking drag distance on touch devices.
• Lazy-loading — only eager-load the visible (and maybe adjacent) images; loading="lazy" the rest.
• Accessibility — aria-roledescription="carousel", label the region, label the prev/next/dot buttons, aria-hidden non-visible slides, and an aria-live region announcing "slide X of N." Respect prefers-reduced-motion.

The framing

"State is just currentIndex; prev/next wrap with modulo, dots jump. The grading is in the interaction and a11y: autoplay must be a cleaned-up setInterval in an effect that pauses on hover and focus — an unpausable autoplay carousel fails accessibility. Animate transform: translateX for smooth GPU-composited sliding. Add arrow-key support and touch swipe via pointer events. Lazy-load all but the visible image. And the ARIA: aria-roledescription=carousel, labeled controls, aria-hidden on offscreen slides, an aria-live 'slide X of N', and respect prefers-reduced-motion."