Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Image Carousel III
hard45 min
Build a smoothly animated image carousel whose DOM stays constant in size: one image while idle and at most two during a transition, regardless of the number of input images.
Requirements
Use the supplied read-only images array (12 local SVG illustrations with alt text). Initially select index 0. No network images, API, autoplay, dragging, or changing input arrays are needed.
Render native Previous and Next buttons with data-testid="previous"/"next" and matching aria-labels Previous image/Next image. Wrap from first to last and last to first.
Keep root data-testid="carousel" and numeric data-index. Display its one-based position as N / 12 in data-testid="position" with aria-live="polite". Preserve meaningful image alt text.
Keep the DOM independent of input length. Render exactly one img when idle and at most two while transitioning; do not retain hidden slides or clones. Only the two navigation buttons are needed; indicators are excluded.
Animate image changes with a 300ms horizontal slide. Disable controls while a transition is running, ignore duplicate requests, and re-enable them after settling. Respect prefers-reduced-motion and cancel timers/animation frames on unmount.
Wraparound must remain animated. Carousel II may use two boundary clones; Carousel III must animate only the outgoing and incoming images.
Complete the supplied scaffold with clipped, responsive overlapping image layers, transform/opacity transitions, and a reduced-motion override in the separate CSS file. Keep the layout and animations in that CSS file.
Examples
Example 1
Input: Navigate from the first image to the previous image.
Output: The last image appears; Next returns to the first.
The same visible behavior applies to every supported framework.
