Carousel

Component notes

• Import Carousel.tsx for the control or Demo.tsx for the complete gallery composition. The gallery uses width 340, looping and hover pause; reusable defaults are width 300, no looping and no hover pause.
• Drag horizontally, use the previous/next buttons or focus the region and press ArrowLeft, ArrowRight, Home or End. Tiny pointer movements do not navigate. Inactive cards and wrap clones are inert and hidden from assistive technology.
• The original perspective, 300/30 spring, 16px spacing, radii, icons and circular variant are retained. Explicit arrows add a navigation row. The gallery starts its width range at 280px so the supplied circular content stays readable. Custom smaller circles need shorter content and fewer slides.
• Autoplay pauses while focus is inside, and optionally while hovered. Explicit pause preserves remaining time; hidden and offscreen time is excluded. Reduced motion renders a static slide with immediate navigation. Idle non-autoplay and completed nonloop slides request no frames.
• Changing item identities, loop mode or replayToken resets selection to the first slide. Width is constrained by the embedding container. Delay is bounded to 250–60000ms; up to 100 slides are rendered.

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.