Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items that should be browsable without taking up the full page.
ts
import{XDSCarousel}from'@xds/core/Carousel'
Best practices
Guidance
Practices
Do
Enable scroll-snap when each item should land precisely at the start edge, like a gallery or product list.
Do
Always provide an aria-label that describes what the carousel contains, like "Featured products" or "Team members".
Do
Use a consistent gap and item width so the carousel looks intentional, not like content overflowing by accident.
Don't
Use a carousel for content every user must see — not everyone scrolls horizontally. Put critical content above the fold.
Don't
Auto-advance items — let the user scroll at their own pace.
Don't
Nest carousels — a carousel inside a carousel is confusing and breaks keyboard navigation.
Examples
Common configurations, variations, and states.
Carousel — Cards
No description available.
Carousel — Snap
Scroll-snap carousel with navigation buttons and team member cards. Each card snaps to the start edge on scroll. Use when items should be viewed one at a time rather than as a continuous strip.