Image Carousel

Build an image carousel: a viewport showing one slide at a time, with Previous/Next controls and dot indicators. It's the "one of N" pattern again — a single index in state decides which slide shows — with one twist: the controls wrap around (Next on the last slide goes to the first), which is just modulo arithmetic.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A slide viewport, Prev/Next buttons, and clickable dots.

Examples

index 0, Next -> 1 -> 2 -> 3 -> Next wraps to 0
index 0, Prev -> wraps to 3 (last)
click dot 2 -> index = 2

the active dot reflects index; the shown slide is SLIDES[index]

Notes

• One index. Track the current slide number; the view is SLIDES[index].
• Wrap with modulo. Next: (i + 1) % n; Prev: (i - 1 + n) % n (the + n keeps it non-negative).
• Dots are derived. The active dot is the one whose position equals index; clicking sets index.
• Out of scope. Slide animations (Image Carousel II) — here it's instant paging.