Carousel with a Per-Slide Countdown
Build an image carousel where each slide has its own duration, a countdown shows the time left on the current slide, and the carousel halts at the final slide. The slides are colored panels in the starter, since the preview has no network. Available as a React template and an HTML/CSS/JS one.
Requirements
- Slide
ishows forslides[i].durationseconds, then the carousel advances; it stops on the last slide. - Show "next in Ns" counting down once per second; it resets to the new slide's duration on every change.
- Previous/Next buttons work and reset the countdown; Previous is disabled on the first slide, Next on the last.
- Pause on hover and on focus; a Play/Pause button too.
- No leaked timers when the slide changes or the component unmounts, and never advance twice when the countdown reaches zero.
Hints
Hint 1
Two pieces of state — index and remaining — and a single goTo(i) that sets both together, so React batches them into one render. Separate effects that each set one of them are how you get the double-advance bug.
Hint 2
The interval effect depends on [index, paused, isLast] and returns clearInterval — each slide gets a fresh timer, and none leak. In vanilla, one arm() function clears the old interval before starting the next.