Carousel
This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel.
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), verticalprevIcon
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(): booleancanScrollPrev
This method returns
true if the carousel can scroll to the previous slide.Signature:
canScrollPrev(): booleanscrollNext
This method scrolls the carousel to the next slide.
Signature:
scrollNext(): voidscrollPrev
This method scrolls the carousel to the previous slide.
Signature:
scrollPrev(): voidscrollTo
This method scrolls the carousel to the specified slide index.
Signature:
scrollTo(index: number): voidindex: The index of the slide to scroll to.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-control-active-Carousel | none | none |
| backgroundColor-control-active-CarouselNew | $color-primary | $color-primary |
| backgroundColor-control-Carousel | none | none |
| backgroundColor-control-CarouselNew | $color-primary | $color-primary |
| backgroundColor-control-disabled-Carousel | none | none |
| backgroundColor-control-disabled-CarouselNew | $color-surface-200 | $color-surface-200 |
| backgroundColor-control-hover-Carousel | none | none |
| backgroundColor-control-hover-CarouselNew | $color-primary | $color-primary |
| backgroundColor-indicator-active-Carousel | none | none |
| backgroundColor-indicator-active-CarouselNew | $color-primary | $color-primary |
| backgroundColor-indicator-Carousel | none | none |
| backgroundColor-indicator-CarouselNew | $color-surface-200 | $color-surface-200 |
| backgroundColor-indicator-hover-Carousel | none | none |
| backgroundColor-indicator-hover-CarouselNew | $color-surface-200 | $color-surface-200 |
| borderRadius-control-Carousel | none | none |
| borderRadius-control-CarouselNew | 50% | 50% |
| height-Carousel | none | none |
| height-CarouselNew | 100% | 100% |
| height-control-Carousel | none | none |
| height-control-CarouselNew | 36px | 36px |
| height-indicator-Carousel | none | none |
| height-indicator-CarouselNew | 6px | 6px |
| textColor-control-active-Carousel | none | none |
| textColor-control-active-CarouselNew | $color-primary | $color-primary |
| textColor-control-Carousel | none | none |
| textColor-control-CarouselNew | $textColor | $textColor |
| textColor-control-disabled-Carousel | none | none |
| textColor-control-disabled-CarouselNew | $textColor-disabled | $textColor-disabled |
| textColor-control-hover-Carousel | none | none |
| textColor-control-hover-CarouselNew | $textColor | $textColor |
| textColor-indicator-active-Carousel | none | none |
| textColor-indicator-active-CarouselNew | $color-primary | $color-primary |
| textColor-indicator-Carousel | none | none |
| textColor-indicator-CarouselNew | $color-primary | $color-primary |
| textColor-indicator-hover-Carousel | none | none |
| textColor-indicator-hover-CarouselNew | $color-primary | $color-primary |
| width-Carousel | none | none |
| width-CarouselNew | 100% | 100% |
| width-control-Carousel | none | none |
| width-control-CarouselNew | 36px | 36px |
| width-indicator-Carousel | none | none |
| width-indicator-CarouselNew | 25px | 25px |