Carousel
A row of slides shown one or a few at a time, moved by swipes, previous and next buttons or dots, with optional autoplay.Basic
Preview
Code
Invite your team
Add people by email. They see every project you share with them.
Connect a repository
Each push builds a preview you can send round before it ships.
Turn on alerts
Get a message when a build fails or a site stops answering.
Add your domain
Point your DNS at us and we renew the certificate for you.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Card, Carousel } from '@advui/core'
<Carousel aria-label="Featured articles" slidesPerView={{ base: 1, md: 3 }}>
{articles.map((article) => (
<Card key={article.id} flexGrow={1}>…</Card>
))}
</Carousel>Examples
Several per view
A part of the next card on phones, two from `sm` and three from `md`.Preview
Code
Hobby
0One project, community support
Starter
12Five projects and a custom domain
Team
Popular
$29Shared projects and roles
Business
$79Audit log and single sign-on
Enterprise
CustomContracts, support and uptime terms
Photos
Images with captions; `loop` goes from the last photo back to the first.Preview
Code
Autoplay
Moves every 6 seconds and waits while the pointer or focus is on it. It starts paused for users who ask for less motion.Preview
Code
Spring release
Branch previews and a faster build cache are live.New region
Projects can now run in Singapore.Office hours
Ask the team anything, every Thursday at 10:00.Controlled
An onboarding tour whose own buttons set `index`; the dots stay in step.Preview
Code
Welcome
Track every visit, referral and follow-up in one place.Add your clinic
Your address and opening hours go on every referral.Invite staff
Nurses and front desk staff get their own sign-in.API reference
Carousel
Each child is a slide; children that are not `Carousel.Item` are wrapped in one. Style and layout props go to the outer box.| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Names the carousel, e.g. "Featured articles". Recommended. |
index | number | — | The slide first in view, when you control it. |
defaultIndex | number | 0 | Starting `index` when uncontrolled. |
onIndexChange | (index: number) => void | — | Called with the new `index` after a button, dot, key, swipe or autoplay. |
slidesPerView | numberor a breakpoint map | 1 | Slides in view at once, mobile first. A fraction such as 1.2 shows part of the next slide. |
gap | SpaceTokens | '4' | Space between slides. |
loop | boolean | false | Next on the last slide goes back to the first, and Previous on the first goes to the last. |
autoplay | boolean | number | false | Moves to the next slide on its own, back to the first after the last: `true` every 5 seconds, or a delay in milliseconds. Adds a pause button. |
showArrows | boolean | true | Previous and next buttons, disabled at the ends unless `loop`. |
showDots | boolean | true | A dot for each slide that can come first, which jumps to it. |
labels | Partial<CarouselLabels> | — | Button names (`previous`, `next`, `goTo(index)`, `current`, `play`, `pause`), the announcement (`position(index, count)`) and the web role descriptions and slide names (`carousel`, `slide`, `slideName(index, count)`), for translation. |
Carousel.Item
One slide, for slide props such as padding or a background. Carousel sets its width; slides in a row share the tallest one’s height.Accessibility
- On web the carousel is a region named by
aria-labeland described as a “carousel”; each slide is a group named “2 of 5” and described as a “slide” (WAI-ARIA APG carousel pattern). - Previous, next and the dots are buttons with names (“Next slide”, “Go to slide 3”); the current dot has
aria-currenton web, and on iOS and Android says “current” in its name (a selected state that moves makes TalkBack read every dot). - The controls come before the slides in focus and reading order, so the pause button is met before the slides move; they show under the slides.
- After a button, dot, key or swipe the new position (“Slide 3 of 5”) is announced: through a polite live region on web, with
AccessibilityInfo.announceForAccessibilityon iOS and Android. Autoplay moves are not announced. - Autoplay waits while the pointer is over the carousel, focus is inside it or a finger is on it, and starts paused when the user asks for less motion. The pause button stops it (WCAG 2.2.2).
- Slides out of view stay in the tree, so screen readers can read them; on web, tabbing to a link in one scrolls it into view and updates the dots.
| Key | Action |
|---|---|
| Tab | Moves through the controls, then the slides. |
| Arrow Left / Arrow Right | Previous or next slide, while the slide area has focus (web). |
| Home / End | First or last slide, while the slide area has focus (web). |
| Enter / Space | Presses the focused button or dot. |
Responsive behavior
slidesPerView takes a mobile-first map; on web the slide widths are CSS media queries, so the server renders them right. The number of dots follows the current breakpoint after hydration.
Platform notes
Web
CSS scroll snap: touch, trackpads and the scroll wheel move it, one slide per swipe. A mouse drag does not; the arrows and dots do. The scrollbar is hidden.
iOS
A horizontal ScrollView that snaps to each slide, one per swipe. Slide widths come from its measured width, so they follow rotation.
Android
Same as iOS. It swipes sideways inside a vertically scrolling screen (
nestedScrollEnabled).