Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Image Carousel II
medium30 min
Extend an image carousel with smooth horizontal transitions, including seamless wraparound at both ends.
Requirements
Use the supplied read-only images array (3 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 / 3 in data-testid="position" with aria-live="polite". Preserve meaningful image alt text.
Render one indicator button per image, data-dot equal to its zero-based index, aria-label="Go to image N", and aria-current="true" only on the selected indicator. Clicking selects that image.
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.
The complete layout and CSS are supplied. Complete the state, image selection, cloning, and animation-phase bindings.
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.
