Image Carousel II

Take the carousel and make the slides glide. Same single index, same wrap — but instead of swapping the visible slide, lay all slides in a row inside a clipped viewport and shift that row with transform: translateX(-index * 100%). A CSS transition on the transform animates the move.

Signature

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

A clipped viewport with a sliding track of all slides.

Examples

index 1 -> track shifts to translateX(-100%), animating from 0%
index 2 -> translateX(-200%); the transition eases between them

viewport: overflow hidden; track: flex row, each slide flex 0 0 100%

Notes

• All slides in a track. Render every slide side by side; the viewport clips to one.
• Shift, don't swap. transform: translateX(-index * 100%) on the track; the index math is unchanged.
• Animate with CSS. A transition: transform … makes the shift glide — no JS animation loop.
• Out of scope. Minimizing the DOM for huge sets (Image Carousel III).