Image Carousel III

Animate the carousel like Carousel II, but keep the DOM footprint minimal: render only the current slide instead of all N. For heavy slides (real images), holding every one in the DOM is wasteful — so render one, and replay a CSS enter animation each time the slide changes by remounting it with a key.

Signature

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

A viewport that holds exactly one slide, animating each change.

Examples

Next -> slide remounts (key = index) -> enters from the right
Prev -> slide remounts -> enters from the left
the DOM always contains one .slide, regardless of how many slides exist

Notes

• One slide in the DOM. Render SLIDES[index] only — not a track of all of them.
• Key to remount. key={index} makes React unmount the old slide and mount the new, replaying its CSS animation.
• Direction picks the side. Track next/prev to enter from the right or left.
• CSS keyframes, not a track. A @keyframes slide-in animates the single mounted slide.