Carousel
This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel.
Behaviors
This component supports the following behaviors:
| Behavior | Properties |
|---|---|
| Animation | animation, animationOptions |
| Bookmark | bookmark, bookmarkLevel, bookmarkTitle, bookmarkOmitFromToc |
| Component Label | label, labelPosition, labelWidth, labelBreak, required, enabled, shrinkToLabel, style, readOnly |
| Tooltip | tooltip, tooltipMarkdown, tooltipOptions |
| Styling Variant | variant |
Properties
autoplay
default: false
Start scrolling the carousel automatically (true) or not (false).
autoplayInterval
default: 5000
Specifies the interval between autoplay transitions.
controls
default: true
Display the previous/next controls (true) or not (false).
indicators
default: true
Display the individual slides as buttons (true) or not (false).
loop
default: false
Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.
nextIcon
The icon to display for the next control.
orientation
default: "horizontal"
This property indicates the orientation of the carousel. The horizontal value indicates that the carousel moves horizontally, and the vertical value indicates that the carousel moves vertically.
Available values: horizontal (default), vertical
prevIcon
The icon to display for the previous control.
startIndex
default: 0
The index of the first slide to display.
stopAutoplayOnInteraction
default: true
This property indicates whether autoplay stops on user interaction.
transitionDuration
default: 25
The duration of the transition between slides.
Events
displayDidChange
This event fires when the active slide of the Carousel changes.
Signature: displayDidChange(activeSlide: number): void
activeSlide: The index of the currently active slide.
Exposed Methods
canScrollNext
This method returns true if the carousel can scroll to the next slide.
Signature: canScrollNext(): boolean
canScrollPrev
This method returns true if the carousel can scroll to the previous slide.
Signature: canScrollPrev(): boolean
scrollNext
This method scrolls the carousel to the next slide.
Signature: scrollNext(): void
scrollPrev
This method scrolls the carousel to the previous slide.
Signature: scrollPrev(): void
scrollTo
This method scrolls the carousel to the specified slide index.
Signature: scrollTo(index: number): void
index: The index of the slide to scroll to.