Carousel Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultactiveSlideIndex active-slide-indexDefines which slide to be active (zero-based numbering).number0alignControls align-controlsAlignment of slotted controlstype CarouselAlignControls =
'start'
'center'
'auto''auto'alignHeader align-headerAlignment of heading and descriptiontype CarouselAlignHeader =
'start'
'center'
'left' 🚫'start'aria ariaAdd ARIA attributes.type CarouselAriaAttribute = {
  'aria-label'?: string;
}undefineddescription descriptionDefines the description used in the carousel.stringundefineddisablePagination 🚫🛠disable-paginationdeprecated since v3.0.0, will be removed with next major release, use pagination instead. If true, the carousel will not show pagination bullets at the bottom.boolean
BreakpointCustomizable<boolean>undefinedfocusOnCenterSlide focus-on-center-slideIndicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.booleanfalsegradientColor gradient-colorAdapts the background gradient for the left and right edge.type CarouselGradientColor =
'background-base'
'background-surface'
'none''none'heading headingDefines the heading used in the carousel.stringundefinedheadingSize heading-sizeDefines the heading size used in the carousel.type CarouselHeadingSize =
'x-large'
'xx-large''x-large'intl intlOverride the default wordings that are used for aria-labels on the next/prev buttons and pagination.type CarouselInternationalization = {
  'prev'?: string;
  'next'?: string;
  'first'?: string;
  'last'?: string;
  'slideLabel'?: string;
  'slide'?: string;
}undefinedpagination 🛠paginationIf false, the carousel will not show pagination bullets at the bottom.boolean
BreakpointCustomizable<boolean>truerewind rewindWhether the slides should rewind from last to first slide and vice versa.booleantrueskipLinkTarget skip-link-targetDefines target of skip link (to skip carousel entries).stringundefinedslidesPerPage 🛠slides-per-pageSets the amount of slides visible at the same time. Can be set to auto if you want to define different widths per slide via CSS.type CarouselSlidesPerPage =
'auto'
1
2
3
4
5
6
7
8
9
10
BreakpointCustomizable<CarouselSlidesPerPage>1theme themeAdapts the color when used on dark background.type Theme =
'light'
'dark'
'auto''light'trimSpace trim-spaceDetermines whether to trim spaces before/after the carousel if focusOnCenterSlide option is true.booleantruewidth widthDefines the outer spacings between the carousel and the left and right screen sides.type CarouselWidth =
'basic'
'extended'
'wide'
'full''basic'wrapContent 🚫wrap-contentHas no effect anymore deprecated since v3.0.0, will be removed with next major releasebooleanundefinedEventsEventDescriptionTypecarouselChange 🚫deprecated since v3.0.0, will be removed with next major release, use update event instead. Emitted when carousel's content slides.type CarouselUpdateEventDetail = {
  activeIndex: number;
  previousIndex: number;
}
CustomEvent<CarouselUpdateEventDetail>update Emitted when carousel's content slides.type CarouselUpdateEventDetail = {
  activeIndex: number;
  previousIndex: number;
}
CustomEvent<CarouselUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="heading"> Renders a heading above the carousel.<slot name="description"> Shows a footer section, flowing under the content area when scrollable.<slot name="controls"> Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout.<slot> Default slot for the carousel slides.CSS VariablesCSS VariableDescriptiondefaultValue--p-carousel-px Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore.--p-carousel-ps Defines the logical inline start padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-pe`. When used then the prop `width` has no effect anymore.--p-carousel-pe Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore.--p-carousel-prev-next-filter CSS Filter applied to the navigation (prev/next buttons)none--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto