The igc-carousel presents a set of igc-carousel-slides by sequentially displaying a subset of one or more slides.
- Slots
-
Default— slot for the carousel. Any projected `igc-carousel-slide` components should be projected here. -
previous-button— Renders content inside the previous button. -
next-button— Renders content inside the next button.
- CSS Parts
navigation— The wrapper container of each carousel navigation button.previous— The wrapper container of the carousel previous navigation button.next— The wrapper container of the carousel next navigation button.dot— The carousel dot indicator container.active— The carousel active dot indicator container.label— The label container of the carousel indicators.start— The wrapping container of all carousel indicators when indicators-orientation is set to start.
Properties
Section titled "Properties"animationType
Section titled "animationType"The animation type.
animationType: HorizontalTransitionAnimationdisableLoop
Section titled "disableLoop"Whether the carousel should skip rotating to the first slide after it reaches the last.
disableLoop: booleandisablePauseOnInteraction
Section titled "disablePauseOnInteraction"Whether the carousel should ignore use interactions and not pause on them.
disablePauseOnInteraction: booleanhideIndicators
Section titled "hideIndicators"Whether the carousel should render the indicator controls (dots).
hideIndicators: booleanhideNavigation
Section titled "hideNavigation"Whether the carousel should skip rendering of the default navigation buttons.
hideNavigation: booleanindicatorsLabelFormat
Section titled "indicatorsLabelFormat"The format used to set the aria-label on the carousel indicators. Instances of '{0}' will be replaced with the index of the corresponding slide.
indicatorsLabelFormat: stringindicatorsOrientation
Section titled "indicatorsOrientation"Sets the orientation of the indicator controls (dots).
indicatorsOrientation: CarouselIndicatorsOrientationinterval
Section titled "interval"The duration in milliseconds between changing the active slide.
interval: numberlocale
Section titled "locale"Gets/Sets the locale used for getting language, affecting resource strings.
locale: stringmaximumIndicatorsCount
Section titled "maximumIndicatorsCount"Controls the maximum indicator controls (dots) that can be shown. Default value is 10.
maximumIndicatorsCount: numberresourceStrings
Section titled "resourceStrings"The resource strings for localization. Currently only aria-label attributes are localized for the carousel.
resourceStrings: ICarouselResourceStringsslidesLabelFormat
Section titled "slidesLabelFormat"The format used to set the aria-label on the carousel slides and the text displayed when the number of indicators is greater than tha maximum indicator count. Instances of '{0}' will be replaced with the index of the corresponding slide. Instances of '{1}' will be replaced with the total amount of slides.
slidesLabelFormat: stringvertical
Section titled "vertical"Whether the carousel has vertical alignment.
vertical: booleanAccessors
Section titled "Accessors"current
Section titled "current"The index of the current active slide.
get current(): numberReturns number
isPaused
Section titled "isPaused"Whether the carousel in in paused state.
get isPaused(): booleanReturns boolean
isPlaying
Section titled "isPlaying"Whether the carousel is in playing state.
get isPlaying(): booleanReturns boolean
slides
Section titled "slides"The slides of the carousel.
get slides(): IgrCarouselSlideComponent[]Returns IgrCarouselSlideComponent[]
total
Section titled "total"The total number of slides.
get total(): numberReturns number
Methods
Section titled "Methods"Switches to the next slide, runs any animations, and returns if the operation was successful.
next(): Promise<boolean>Returns Promise<boolean>
pause
Section titled "pause"Pauses the carousel rotation of slides.
pause(): voidReturns void
Resumes playing of the carousel slides.
play(): voidReturns void
Switches to the previous slide, runs any animations, and returns if the operation was successful.
prev(): Promise<boolean>Returns Promise<boolean>
select
Section titled "select"Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
select(slide: IgrCarouselSlideComponent, animationDirection: "next" | "prev"): Promise<boolean>Parameters
- slide:
IgrCarouselSlideComponent - animationDirection:
"next" | "prev"
Returns Promise<boolean>
Events
Section titled "Events"onPaused
Section titled "onPaused"Emitted when the carousel enters paused state by a user interaction.
onPaused(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onPlaying
Section titled "onPlaying"Emitted when the carousel enters playing state by a user interaction.
onPlaying(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onSlideChanged
Section titled "onSlideChanged"Emitted when the current active slide is changed either by user interaction or by the interval callback.
onSlideChanged(args: CustomEvent<number>): voidParameters
- args:
CustomEvent<number>