Image Carousel With One Image Element
Build an image carousel with previous, next and page buttons. The probes: wrap-around navigation, fitting images of any shape inside a fixed frame, and keeping only one image element in the DOM. The default template is React, and an HTML/CSS/JS template is the alternate.
Requirements
- Previous on the first image goes to the last, and Next on the last goes to the first.
- One page button per image jumps straight to it. The current one is marked, visibly and with
aria-current. - The five images have different aspect ratios. Each fits entirely inside the frame, without cropping or distortion, and the frame and controls never move as images change.
- There is exactly one
<img>in the DOM at any time, and navigation changes itssrcandalt. - With the carousel focused, ArrowLeft and ArrowRight navigate. A live region announces "Image 2 of 5".
Hints
Hint 1
Wrap with a modulo that handles negatives: ((i % n) + n) % n. A plain i % n gives -1 for i = -1.
Hint 2
A frame with a fixed aspect-ratio, holding an image with width: 100%, height: 100% and object-fit: contain, letterboxes any shape without distortion.
Hint 3
In React, render a single <img> without a changing key, and React updates the same node. In plain DOM, keep a reference to the one element and set its src and alt.