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 is active (zero-based numbering).number0alignControls align-controlsAligns the slotted controls.type CarouselAlignControls =
'start'
'center'
'auto''auto'alignHeader align-headerAligns the heading and description.type CarouselAlignHeader =
'start'
'center''start'aria ariaSets ARIA attributes.type CarouselAriaAttribute = {
  'aria-label'?: string;
}undefineddescription descriptionDefines the description used in the carousel.stringundefinedfocusOnCenterSlide 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.booleanfalsegradient gradientFades the slides out.booleanfalseheading 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>falserewind rewindWhether the slides should rewind from last to first slide and vice versa.booleanfalseskipLinkTarget skip-link-targetDefines the skip link target used 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>1trimSpace trim-spaceDetermines whether to trim spaces before/after the carousel if focusOnCenterSlide option is true.booleanfalsewidth widthDefines the outer spacings between the carousel and the left and right screen sides.type CarouselWidth =
'basic'
'extended'
'wide'
'full''basic'EventsEventDescriptionTypeupdate 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"> Renders descriptive content below the heading.<slot name="controls"> Renders custom controls such as navigation buttons or indicators.<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.