Carousel
Demo
Card 1
Content 1
Card 2
Content 2
Card 3
Content 3
Card 4
Content 4
Card 5
Content 5
Card 6
Content 6
Props
| Prop | Type | Description | Default |
|---|---|---|---|
children | React.ReactNode[] | The content to be displayed within the carousel. | N/A |
orientation | "horizontal" | "vertical" | The orientation of the carousel. | N/A |
align | "start" | "center" | "end" | Alignment of the carousel content. | "start" |
loop | boolean | Whether the carousel should loop its content. | true |
autoplay | boolean | Enables automatic transitioning between carousel items. | true |
autoplayDelay | number | Delay (in ms) before transitioning to the next item. | 4000 |
buttonProps | ButtonProps | Props to be passed to the navigation buttons. | N/A |
classNames | { root?, content?, item?, button? } | Custom CSS class names for styling various parts of the carousel. | N/A |
Styles
The Carousel component supports custom styling through the classNames prop. Each key in the classNames object corresponds to a different part of the Carousel:
root: The main container of the Carousel.content: The container for the Carousel items.item: Individual Carousel items (default:"md:basis-1/2 lg:basis-1/3").button: The previous and next navigation buttons.
These class names allow for extensive customization and responsive design adjustments.