Build one logical navigator, then adapt touch, mouse, keyboard, buttons, and TV remotes into the same commands. The renderer may scroll, snap, or normalize a loop, but logical slide identity, focus, and pause state stay stable.
A carousel is often introduced as an array plus a current index. That model works until a finger changes direction mid-swipe, a TV remote moves focus into the next card, an image decodes late, or an autoplay timer fires while the user is reading. The difficult part is not moving pixels. It is deciding who owns navigation and when a movement becomes committed.
Start with a logical sequence
Keep slide records keyed by stable IDs. Store the logical active ID, the last settled direction, autoplay pause reasons, and any pending command outside rendered slide elements. Treat scroll offset as presentation evidence, not product truth.
Every input adapter should emit a small command such as previous, next, goTo(id), pause(reason), or resume(reason). This keeps a swipe, a click, an ArrowRight press, and a TV remote action from developing different wrap, loading, and analytics behavior.
The public interview prompt
Design a reusable carousel for editorial stories, products, or media cards. It must work with touch, mouse, keyboard, and TV remotes. Explain:
- stable slide IDs, active identity, settled geometry, and navigation commands;
- native scroll snapping versus custom pointer physics;
- gesture intent, velocity, distance, cancellation, and nested page scrolling;
- previous, next, picker, keyboard, and spatial focus behavior;
- autoplay ownership, pause reasons, visibility, and reduced motion;
- finite navigation, optional looping, sentinel clones, and normalization;
- responsive image sources, decode timing, lazy loading, prefetch, and failure states;
- focus isolation, announcements, slide naming, and hidden content;
- resize, orientation change, restoration, deep links, analytics, and experiments;
- large catalogs, bounded rendering, performance budgets, testing, and rollout.
Assume a page can show several carousels, each with 8 to 200 slides. A TV layout shows multiple focusable cards per screen. Mobile users may begin a vertical page scroll over the carousel. Network quality varies, and some slides contain video. These are interview assumptions, not measured product facts.
What the premium solution covers
The full solution defines the state machine, command boundary, native and custom gesture options, settled-slide detection, TV focus rules, autoplay arbitration, media priority, accessible semantics, safe loop normalization, rendering limits, observability, tests, and rollout plan.
Original media follows one command through four input adapters, opens the loop sentinel model, shows the media priority window, and maps focus ownership. Two deterministic labs let readers test gesture thresholds and autoplay pause arbitration.