Carousel Theming
Theming documentation for Carousel component
Styled#
Carousel CSS Classes#
List of class names used in the styled mode.
| className | description |
|---|---|
| p-carousel | Class name of the root element |
CarouselContent CSS Classes#
List of class names used in the styled mode.
CarouselIndicators CSS Classes#
List of class names used in the styled mode.
CarouselIndicator CSS Classes#
List of class names used in the styled mode.
CarouselNext CSS Classes#
List of class names used in the styled mode.
CarouselPrev CSS Classes#
List of class names used in the styled mode.
Design Tokens#
List of design tokens.
| token | CSS Variable | description |
|---|---|---|
| carousel.transition.duration | --p-carousel-transition-duration | Transition duration of root |
| carousel.content.gap | --p-carousel-content-gap | Gap of content |
| carousel.indicator.list.padding | --p-carousel-indicator-list-padding | Padding of indicator list |
| carousel.indicator.list.gap | --p-carousel-indicator-list-gap | Gap of indicator list |
| carousel.indicator.width | --p-carousel-indicator-width | Width of indicator |
| carousel.indicator.height | --p-carousel-indicator-height | Height of indicator |
| carousel.indicator.border.radius | --p-carousel-indicator-border-radius | Border radius of indicator |
| carousel.indicator.focus.ring.width | --p-carousel-indicator-focus-ring-width | Focus ring width of indicator |
| carousel.indicator.focus.ring.style | --p-carousel-indicator-focus-ring-style | Focus ring style of indicator |
| carousel.indicator.focus.ring.color | --p-carousel-indicator-focus-ring-color | Focus ring color of indicator |
| carousel.indicator.focus.ring.offset | --p-carousel-indicator-focus-ring-offset | Focus ring offset of indicator |
| carousel.indicator.focus.ring.shadow | --p-carousel-indicator-focus-ring-shadow | Focus ring shadow of indicator |
| carousel.indicator.background | --p-carousel-indicator-background | Background of indicator |
| carousel.indicator.hover.background | --p-carousel-indicator-hover-background | Hover background of indicator |
| carousel.indicator.active.background | --p-carousel-indicator-active-background | Active background of indicator |
Unstyled#
Theming is implemented with the pass through properties in unstyled mode.