Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Image Carousel
medium20 min
Build an image carousel with next/previous controls, wraparound navigation, and selectable image indicators.
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.
Switch images immediately and keep exactly one image in the viewport. No animation is required.
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.
