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: HorizontalTransitionAnimation

disableLoop

Section titled "disableLoop"

Whether the carousel should skip rotating to the first slide after it reaches the last.

 
disableLoop: boolean

disablePauseOnInteraction

Section titled "disablePauseOnInteraction"

Whether the carousel should ignore use interactions and not pause on them.

 
disablePauseOnInteraction: boolean

hideIndicators

Section titled "hideIndicators"

Whether the carousel should render the indicator controls (dots).

 
hideIndicators: boolean

hideNavigation

Section titled "hideNavigation"

Whether the carousel should skip rendering of the default navigation buttons.

 
hideNavigation: boolean

indicatorsLabelFormat

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: string

indicatorsOrientation

Section titled "indicatorsOrientation"

Sets the orientation of the indicator controls (dots).

 
indicatorsOrientation: CarouselIndicatorsOrientation

interval

Section titled "interval"

The duration in milliseconds between changing the active slide.

 
interval: number | undefined

locale

Section titled "locale"

Gets/Sets the locale used for getting language, affecting resource strings.

 
locale: string

maximumIndicatorsCount

Section titled "maximumIndicatorsCount"

Controls the maximum indicator controls (dots) that can be shown. Default value is 10.

 
maximumIndicatorsCount: number

resourceStrings

Section titled "resourceStrings"

The resource strings for localization. Currently only aria-label attributes are localized for the carousel.

 
resourceStrings: ICarouselResourceStrings

slidesLabelFormat

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: string

vertical

Section titled "vertical"

Whether the carousel has vertical alignment.

 
vertical: boolean

Accessors

Section titled "Accessors"

current

Section titled "current"

The index of the current active slide.

 
get current(): number

Returns number

isPaused

Section titled "isPaused"

Whether the carousel in in paused state.

 
get isPaused(): boolean

Returns boolean

isPlaying

Section titled "isPlaying"

Whether the carousel is in playing state.

 
get isPlaying(): boolean

Returns 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(): number

Returns number

Methods

Section titled "Methods"

next

Section titled "next"

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(): void

Returns void

play

Section titled "play"

Resumes playing of the carousel slides.

 
play(): void

Returns void

prev

Section titled "prev"

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>): void

Parameters

Returns void

onPlaying

Section titled "onPlaying"

Emitted when the carousel enters playing state by a user interaction.

 
onPlaying(args: CustomEvent<void>): void

Parameters

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>): void

Parameters

Returns void