Import
import { Carousel } from '@cerberus/react'Usage
Loading example...
With Indicators
Use the showIndicators prop to display indicators for each slide.
Loading example...
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 |
Data Attributes
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 |
Root CSS Variables
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 |
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.
Note
It is best to only use the CarouselParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.
| 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. |