IgcCarouselComponent | Infragistics API Docs

The carousel presents a set of slides by sequentially displaying a subset of one or more.

Element: igc-carousel

Slots: Default slot for the carousel. Any carousel slides should be projected here — fault slot for the carousel. Any carousel slides should be projected here.; indicator — Renders the custom indicators of the carousel. An indicator element sets this slot itself.; 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

animationType

The animation type.

animationType: HorizontalTransitionAnimation = 'slide'

Defined in src/components/carousel/carousel.ts:313

disableLoop

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

disableLoop: boolean = false

Defined in src/components/carousel/carousel.ts:199

disablePauseOnInteraction

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

disablePauseOnInteraction: boolean = false

Defined in src/components/carousel/carousel.ts:212

hideIndicators

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

hideIndicators: boolean = false

Defined in src/components/carousel/carousel.ts:230

hideNavigation

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

hideNavigation: boolean = false

Defined in src/components/carousel/carousel.ts:221

indicatorsOrientation

The orientation of the indicator controls (dots).

indicatorsOrientation: CarouselIndicatorsOrientation = 'end'

Defined in src/components/carousel/carousel.ts:248

interval

The duration in milliseconds between changing the active slide.

interval: number | undefined

Defined in src/components/carousel/carousel.ts:295

maximumIndicatorsCount

The maximum number of indicator controls (dots) that can be shown. Default value is 10.

maximumIndicatorsCount: number = 10

Defined in src/components/carousel/carousel.ts:304

vertical

Whether the carousel has vertical alignment.

vertical: boolean = false

Defined in src/components/carousel/carousel.ts:239

tagName

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

tagName: "igc-carousel" = 'igc-carousel'

Defined in src/components/carousel/carousel.ts:107

Accessors

current

The index of the current active slide.

get current(): number

Defined in src/components/carousel/carousel.ts:327

Returns number

indicatorsLabelFormat

get indicatorsLabelFormat(): any

Defined in src/components/carousel/carousel.ts:257

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.

set indicatorsLabelFormat(value: string): void

Defined in src/components/carousel/carousel.ts:257

Parameters

value: string

Returns void

isPaused

Whether the carousel is in paused state.

get isPaused(): boolean

Defined in src/components/carousel/carousel.ts:339

Returns boolean

isPlaying

Whether the carousel is in playing state.

get isPlaying(): boolean

Defined in src/components/carousel/carousel.ts:334

Returns boolean

slides

The slides of the carousel.

get slides(): IgcCarouselSlideComponent[]

Defined in src/components/carousel/carousel.ts:317

Returns IgcCarouselSlideComponent[]

slidesLabelFormat

get slidesLabelFormat(): any

Defined in src/components/carousel/carousel.ts:278

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.

set slidesLabelFormat(value: string): void

Defined in src/components/carousel/carousel.ts:278

Parameters

value: string

Returns void

total

Total number of slides.

get total(): number

Defined in src/components/carousel/carousel.ts:322

Returns number

Methods

connectedCallback

connectedCallback(): void

Defined in src/components/carousel/carousel.ts:414

Returns void

disconnectedCallback

disconnectedCallback(): void

Defined in src/components/carousel/carousel.ts:423

Returns void

Switches to the next slide, runs any animations, and returns if the operation was successful.

next(): Promise<boolean>

Defined in src/components/carousel/carousel.ts:777

Returns Promise<boolean>

pause

Pauses the rotation of the carousel slides.

pause(): void

Defined in src/components/carousel/carousel.ts:769

Returns void

play

Resumes playing of the carousel slides.

play(): void

Defined in src/components/carousel/carousel.ts:760

Returns void

Switches to the previous slide, runs any animations, and returns if the operation was successful.

prev(): Promise<boolean>

Defined in src/components/carousel/carousel.ts:789

Returns Promise<boolean>

select

Switches to the passed-in slide, runs any animations, and returns if the operation was successful.

select(slide: IgcCarouselSlideComponent, animationDirection: "prev" | "next"): Promise<boolean>

Defined in src/components/carousel/carousel.ts:802

Parameters

slide: IgcCarouselSlideComponent
animationDirection: "prev" | "next"