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 is fired when the displayed content of the CarouselNew changes.

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