Carousel
Carousels are comprised of a rotating set of slides, primarily used to highlight content that is prominent but not essential to completing a task. They usually contain between two to five slides, slide number indicator, and navigational arrows that allow the customer to rotate the slide manually. Carousels may also be known as a slider, a slideshow, or a gallery.
Import
Manual Control
Auto Rotate
Cards Panel
Image Slides In Card
Props
Carousel Props
| Name | Description | Default |
|---|---|---|
| id* | Unique identifier for the Carousel component. string | - |
| shouldAutoPlay | boolean | - |
| defaultCurrentSlideId | string | - |
| currentSlideId | string | - |
| children* | Children components to be rendered within the carousel ReactNode | - |
| interval | Interval for autoplay in milliseconds number | - |
| isNavigationOnSlides | Whether navigation controls should be visible on slides boolean | - |
| onSlideChange | Event handler when slide changes ((newSlideId: string) => void) | - |
| navigationStyle | Whether the navigation should show dots or text. Defaults to "text" | "dots" | - |
| isSlideFullWidth | Whether the carousel should take the full width of its container boolean | - |
| isInfinite | Whether the carousel should disable looping from beginning to end and vice versa boolean | - |
| previousButtonProps | Props passed to the previous IconButton component IconButtonOtherProps | - |
| nextButtonProps | Props passed to the next IconButton component IconButtonOtherProps | - |
| reactlytics | ReactlyticsProp | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. CarouselLabelOverrides | - |
Carousel Item Props
| Name | Description | Default |
|---|---|---|
| id* | Unique identifier of the carousel item string | - |
| children | Child elements to be rendered within the carousel item ReactNode | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.