import { Carousel } from '@cerberus/react'Use the showIndicators prop to display indicators for each slide.
You can utilize the primitive components or the css prop to customize the button.
| Component | Description |
|---|---|
| CarouselRoot | The context provider for the Carousel parts |
| CarouselControl | The container of the Next and Prev triggers |
| CarouselPrevTrigger | The button to navigate to the previous slide |
| CarouselNextTrigger | The button to navigate to the next slide |
| CarouselItemGroup | The container for the Carousel items |
| CarouselItem | The individual item within the Carousel |
| CarouselIndicatorGroup | The container for the indicators |
| CarouselIndicator | The individual indicator representing each slide |
The primitives additionally use the following data attributes for custom styling:
| Attribute | Value |
|---|---|
[data-scope] | carousel |
[data-part] | root |
[data-orientation] | The orientation of the carousel |
The Root primitive sets the following CSS variables for customization:
| Variable | Description |
|---|---|
--slides-per-page | The number of slides visible per page |
--slide-spacing | The spacing between slides |
--slide-item-size | The calculated size of each slide item |
The Carousel component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| showIndicators | false | Whether to show indicators for each slide. |
The Carousel also accepts all the props of the Root component.
The CarouselParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The Carousel component which is the Provider for the family. |
| Control | The container of the Next and Prev triggers. |
| PrevTrigger | The button to navigate to the previous slide. |
| NextTrigger | The button to navigate to the next slide. |
| ItemGroup | The container for the Carousel items. |
| Item | The CarouselItem component which represents an individual item within the carousel. |
| IndicatorGroup | The container for the indicators. |
| Indicator | The individual indicator representing each slide. |
On this page
import { Center } from '@/styled-system/jsx'
import { Button, Carousel, For } from '@cerberus/react'
import { ITEMS } from './items'
export function BasicDemo() {
return (
<Carousel.Root
defaultPage={0}
padding="1rem"
slideCount={ITEMS.length}
slidesPerPage={2.5}
spacing="1rem"
>
<Carousel.ItemGroup>
<For each={ITEMS}>
{(item, idx) => (
<Carousel.Item key={item.id} index={idx} asChild>
<Center
bgColor="page.bg.100"
border="1px solid"
borderColor="page.border.200"
color="page.text.100"
h="21rem"
rounded="md"
transitionProperty="all"
transitionDuration="normal"
transitionTimingFunction="cubic-bezier(0.075, 0.82, 0.165, 1)"
willChange="z-index, transform, box-shadow"
_hover={{
shadow: 'lg',
transform: 'scale(1.2)',
zIndex: 'decorator',
}}
>
{item.content}
</Center>
</Carousel.Item>
)}
</For>
</Carousel.ItemGroup>
<Carousel.Control>
<Carousel.PrevTrigger asChild>
<Button shape="rounded" size="sm" usage="outlined">
Prev
</Button>
</Carousel.PrevTrigger>
<Carousel.NextTrigger asChild>
<Button shape="rounded" size="sm" usage="outlined">
Next
</Button>
</Carousel.NextTrigger>
</Carousel.Control>
</Carousel.Root>
)
}
import { Center } from '@/styled-system/jsx'
import { Carousel, For } from '@cerberus/react'
import { ITEMS } from './items'
export function IndicatorDemo() {
return (
<Carousel.Root
defaultPage={0}
padding="1rem"
slideCount={ITEMS.length}
slidesPerPage={1}
spacing="1rem"
showIndicators
>
<Carousel.ItemGroup>
<For each={ITEMS}>
{(item, idx) => (
<Carousel.Item key={item.id} index={idx} asChild>
<Center
bgColor="page.bg.100"
border="1px solid"
borderColor="page.border.200"
color="page.text.100"
h="16rem"
rounded="md"
transitionProperty="all"
transitionDuration="normal"
transitionTimingFunction="cubic-bezier(0.075, 0.82, 0.165, 1)"
willChange="z-index, transform, box-shadow"
>
{item.content}
</Center>
</Carousel.Item>
)}
</For>
</Carousel.ItemGroup>
</Carousel.Root>
)
}