1import { Carousel } from '@cerberus/react'Usage
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
With Indicators
Use the showIndicators prop to display indicators for each slide.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Primitives
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 |
API
Props
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.
Parts
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