Carousels — demo

Compare BEFORE “auto-rotate with no pause” vs AFTER “user-controlled + pause + reduced-motion safe.” (No tracking.)

Share this demo

Copy a clean link to share (no tracking).

Theme

Cycle: DEFAULT → COLOR‑SAFE → HIGH CONTRAST.

Theme: DEFAULT

BEFORE Auto-rotate, no pause

Problem: content changes even if you are still reading. Focus can be disrupted, and there’s no pause/stop. Screen readers may get silence because nothing is announced.

Auto-rotating (no pause).
Status: Running.

Note: in real apps this also breaks when the carousel changes on scroll, hover, or timer.

AFTER User controls + pause

Improvements: no auto-rotate by default, clear Previous/Next, a Pause control when autoplay is enabled, and reduced-motion safe defaults.

Slide 1 of 3.
Status: Ready. Use Previous/Next.

Tip: if you must autoplay, provide Pause, and stop rotating while the user interacts.

Checklist