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:

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.

Styling

Theme Variables