Carousel @astryx-svelte/core v0.3.0 · Carousel
Usage
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
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 | Reach for hasLoop on small, cyclable sets like a photo gallery, where wrapping past the last item back to the first feels natural. |
| 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. |
| Do | Trust the built-in navigation: trackpad users can swipe horizontally, and mouse users can hold Shift while scrolling the wheel to move through items. |
| Don't | Use a carousel for content every user must see. Not everyone scrolls horizontally, so 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
A horizontally scrollable row of cards with snap scrolling enabled. Use for feature grids, product lists, or any set of cards that overflows the available width. The carousel adds fade edges and navigation buttons automatically.
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.