Image Carousel

MediumReact Components30 min4 tests

Build a React image carousel that shows one slide at a time with wrapping Next / Previous controls.

Build a carousel that shows one image at a time with Previous / Next controls.

The slides are given to you as a SLIDES array; render the one at the current index and let the buttons move through them.

Requirements

Show a single slide at a time as an <img> with its alt text.
Add Next and Previous buttons with accessible labels "Next slide" / "Previous slide".
Navigation wraps: Next past the last slide goes to the first; Previous before the first goes to the last.
A <p role="status"> shows Slide X of N.

Hints (4)

Keep the current position in useState, starting at 0.
Wrap forward with the modulo operator: (i + 1) % count.
For previous, add count before the modulo so it never goes negative: (i - 1 + count) % count.
Read the current slide as SLIDES[index] and render its src + alt.

Flipkart · Swiggy · Razorpay