Build an image carousel
Navigate a responsive image set with wraparound controls, indicators, keyboard support, and status announcements.Description
Requirements
The solution exports the required ImageCarousel API from the editable module.
Next previous works deterministically for the documented normal, boundary, and repeated-use scenarios.
Wrap navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Slide indicators works deterministically for the documented normal, boundary, and repeated-use scenarios.
Keyboard navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Accessible status works deterministically for the documented normal, boundary, and repeated-use scenarios.
Responsive media works deterministically for the documented normal, boundary, and repeated-use scenarios.
Wrap to the first slide
Activate Next on the final slide
The first slide becomes active and the status updates
Wraparound makes repeated navigation predictable in both directions.
Constraints
Use meaningful alternative text supplied by each slideKeep controls available from the keyboardImages must fit their container without distorting
Hints
Hint 1
Normalize the next index with the slide count instead of branching at each edge.
Hint 2
Use actual buttons for arrows and indicators, and announce only the resulting position.
Hint 3
Put keyboard handling on the carousel region without intercepting unrelated form controls.