Carousel
A track of slides people page through with previous and next buttons, swipe or the arrow keys, like a gallery or featured cards.
Master
Page with the buttons, swipe or the arrow keys. Switch orientation, slides per view and alignment; turn on loop.
Slide 1 of 1
Usage
Use Carousel for galleries, featured cards and paged media. It is one component: pass items as an array of slides. slidesPerView shows 1 to 4 slides at once, so the next ones peek in. Previous and next are kit Buttons beside the track (above and below it when vertical); they turn off at the ends unless loop wraps around. People can also swipe or scroll the track, and press the arrow keys when it has focus. showIndex adds a Slide 2 of 5 caption under it. See contracts/carousel.json for the full contract.
Do's
- Galleries, featured cards and paged media.
- A row of cards wider than the space, where peeking at the next one invites people to page.
Don'ts
- Do not add CarouselContent, CarouselItem, CarouselPrevious or CarouselNext. Pass items.
- Do not use it to switch views. Use Tabs.
- Do not use it to page a list or table. Show the rows.
- Do not use it for main navigation.
- No autoplay.
- Do not use raw hex.
<Carousel
items={slides}
orientation="horizontal"
slidesPerView={1}
alignment="start"
showIndex
/>