You are given a partially-built image carousel component for a React application. The carousel displays one slide at a time and provides previous/next navigation buttons as well as clickable dot indicators.
Your codebase is split into several modules:
src/data/slides.js — an array of mock slide data (colored backgrounds with titles; no external images).src/components/Carousel.jsx — the main carousel component that holds state and passes props to children.src/components/CarouselSlide.jsx — renders the currently active slide.src/components/CarouselControls.jsx — renders the previous/next buttons and the dot indicators.
What you need to do
1. Implement the navigation logic.
The Carousel.jsx component has stub functions nextSlide and prevSlide. They are currently empty. Implement them so that:
nextSlide advances to the next slide. When the user is on the last slide, it should wrap around to the first slide (index 0).prevSlide goes to the previous slide. When the user is on the first slide, it should wrap around to the last slide.
2. Fix the active-dot bug.
There is a bug in CarouselControls.jsx — the dot indicator that highlights the current slide is out of sync with the actual slide being displayed. The active dot does not match the slide index. Find and fix the bug so that the dot corresponding to the currently displayed slide is correctly highlighted.
Design constraints
- The carousel should display exactly one slide at a time.
- The initial slide shown should be the first slide (index 0).
- Navigation wraps around at both ends.
- Styling is minimal — just enough layout and borders to make slides and controls legible.