carousel
Slides are data, like accordion rows. Pass items and the carousel renders the viewport,
the arrows and the indicator dots.
<Carousel
items={[
{ id: "one", content: "First" },
{ id: "two", content: "Second" },
]}
loop
autoplay={{ delay: 4000 }}
/><Carousel
:items="[
{ id: 'one', content: 'First' },
{ id: 'two', content: 'Second' },
]"
loop
:autoplay="{ delay: 4000 }"
/>slidesPerPage shows several slides at once and spacing is the gap between them, as a
CSS length. allowMouseDrag lets the pointer drag the track, which touch does anyway.
The current page
React and Vue spell a controlled value too differently to share one type, so this prop
lives outside the shared contract. React takes Ark UI’s page, defaultPage and
onPageChange. Vue takes v-model:page, with defaultPage as the uncontrolled
counterpart.
<Carousel items={items} page={page} onPageChange={({ page }) => setPage(page)} /><Carousel :items="items" v-model:page="page" />Arbitrary markup in a slide
content on an item is text. For anything else use renderItem in React or the item
slot in Vue, both of which receive the item and its index.
Slots
The same word names the recipe slot, the data-slot attribute and the key in ui.
- base
- controls
- viewport
- item
- prev
- next
- dots
- dot
Props
Taken by both adapters, read out of the component module. The same names and the same types work in React and Vue.
- ui
CarouselUI
Per-slot class overrides.
- itemsrequired
CarouselItem[]
The slides to render, in order.
- orientation
"horizontal" | "vertical"
Defaults to
"horizontal"- loop
boolean
Wrap around instead of stopping at the last slide.
- autoplay
boolean | { delay: number }
Advance on a timer. Pass a delay in milliseconds to set the pace.
- slidesPerPage
number
Slides visible per page.
- spacing
string
Gap between slides, as a CSS length.
- allowMouseDrag
boolean
Let the pointer drag the track.
- prevIcon
Component
- nextIcon
Component
Vue only
Binds v-model:page.
- defaultPage
number
- class
unknown
- #item
{ item: CarouselItem; index: number }
- Replace a slide's content. Falls back to `item.content`.