Carousel Theming

Theming documentation for Carousel component

Styled#

List of class names used in the styled mode.

classNamedescription
p-carouselClass 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.

tokenCSS Variabledescription
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.