Carousel
轮播
Aliases:轮播图片轮播轮播图banner 切换跑马灯切换carouselslider gallery
What is it
A horizontally scrolling track of items where one slide takes focus at a time and the rest slide out or peek at the edge as a hint. Switching uses dots, arrows or autoplay — common in hero banners, image galleries and recommendation rails. Fits "browse one item after another" content, not information that must be compared side by side.
Interactive playground
Try it. Make an informed choice.Browse every item with arrows or keyboard; check focus is managed.
Loading lab…
What to look for
- 01Current item is visibly indicated after switching
- 02Left/Right keys switch slides
✓ When to use
- A set of similar items browsed one at a time (banner, gallery, rails)
- Horizontal space is tight but you still want a "more exists" cue
- Image- or card-led slides with brief captions
✕ When not to use
- Users must compare items side by side — use a card grid or table
- Only three to five equally important items — lay them out flat
- Critical actions or forms hidden on one slide — switching breaks the task
Variants
Dot pagination
分页点
Small dots mark position and jump directly — the most compact
Arrow controls
箭头
Prev/next arrows step through slides — the desktop default
Autoplay with pause
自动播放
Timed advance with pause on hover or focus — a pause control is required
Implementation
scroll-snap-typeoverflow-xtransformThe track uses overflow-x: auto with scroll-snap-type: x mandatory and items set scroll-snap-align: center so pure CSS scrolling works; control-driven switching animates transform: translateX(-index * 100%). Mark off-screen items aria-hidden or inert to cut screen-reader noise, label the region aria-roledescription="carousel", and announce "n of N" via aria-live="polite" on change. Autoplay needs a pause control and must shut off under prefers-reduced-motion.
Platform API
aria-roledescription="carousel"scroll-snap-typearia-liveIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA APG | Carousel |
| shadcn/ui | Carousel (Embla) |
| MUI | Carousel |
Related concepts
A row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsAlternativeA horizontal strip of content scrolling continuously and looping seamlessly. Used for logo walls, partner lists, announcements and promo banners — the endless flow signals abundance; it never asks users to read every item.
MotionAlternativeA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed with