IgxCarouselComponent

Ignite UI for Angular Carousel - Documentation

The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces. It can be used as a separate fullscreen element or inside another component.

Example:

<igx-carousel>
  <igx-slide>
    <h3>First Slide Header</h3>
    <p>First slide Content</p>
  <igx-slide>
  <igx-slide>
    <h3>Second Slide Header</h3>
    <p>Second Slide Content</p>
</igx-carousel>

Constructors

new IgxCarouselComponent(): IgxCarouselComponent

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:536

Returns IgxCarouselComponent

Properties

animationType

Gets/sets the animation type of carousel. Default value is slide.

<igx-carousel animationType="none">
<igx-carousel>

animationType: CarouselAnimationType = CarouselAnimationType.slide

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:219

carouselPaused

An event that is emitted after the carousel has been paused. Provides a reference to the carousel as an event argument.

<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>

carouselPaused: EventEmitter<IgxCarouselComponent>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:342

carouselPlaying

An event that is emitted after the carousel has resumed transitioning between slides. Provides a reference to the carousel as an event argument.

<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>

carouselPlaying: EventEmitter<IgxCarouselComponent>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:353

cssClass

Returns the class of the carousel component.

let class =  this.carousel.cssClass;

cssClass: string = 'igx-carousel'

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:106

gesturesSupport

Controls whether the carousel should support gestures. Default value is true.

<igx-carousel [gesturesSupport]="false"></igx-carousel>

gesturesSupport: boolean = true

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:184

id

Sets the id of the carousel. If not set, the id of the first carousel component will be "igx-carousel-0".

<igx-carousel id="my-first-carousel"></igx-carousel>

id: string

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:70

indicators

Controls whether the carousel should render the indicators. Default value is true.

<igx-carousel [indicators]="false"></igx-carousel>

indicators: boolean = true

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:161

indicatorsOrientation

Gets/sets the display mode of carousel indicators. It can be start or end. Default value is end.

<igx-carousel indicatorsOrientation="start">
<igx-carousel>

indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:207

indicatorTemplate

The custom template, if any, that should be used when rendering carousel indicators

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselIndicator let-slide>
        <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
        <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
     </ng-template>
 </igx-carousel>

indicatorTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:241

loop

Sets whether the carousel should loop back to the first slide after reaching the last slide. Default value is true.

<igx-carousel [loop]="false"></igx-carousel>

loop: boolean = true

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:128

maximumIndicatorsCount

Controls the maximum indexes that can be shown. Default value is 10.

<igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>

maximumIndicatorsCount: number = 10

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:195

Controls whether the carousel should render the left/right navigation buttons. Default value is true.

<igx-carousel [navigation]="false"></igx-carousel>

navigation: boolean = true

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:150

nextButtonTemplate

The custom template, if any, that should be used when rendering carousel next button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselNextButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="add"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

nextButtonTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:264

pause

Sets whether the carousel will pause the slide transitions on user interactions. Default value is true.

<igx-carousel [pause]="false"></igx-carousel>

pause: boolean = true

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:139

prevButtonTemplate

The custom template, if any, that should be used when rendering carousel previous button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.prevButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="remove"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

prevButtonTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:287

role

Returns the role attribute of the carousel.

let carouselRole =  this.carousel.role;

role: string = 'region'

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:79

slideAdded

An event that is emitted after a slide has been added to the carousel. Provides references to the carousel and slide components as event arguments.

<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>

slideAdded: EventEmitter<ISlideEventArgs>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:320

slideChanged

An event that is emitted after a slide transition has happened. Provides references to the carousel and slide components as event arguments.

<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>

slideChanged: EventEmitter<ISlideEventArgs>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:309

slideRemoved

An event that is emitted after a slide has been removed from the carousel. Provides references to the carousel and slide components as event arguments.

<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>

slideRemoved: EventEmitter<ISlideEventArgs>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:331

slides

The collection of slides currently in the carousel.

let slides: QueryList<IgxSlideComponent> = this.carousel.slides;

slides: QueryList<IgxSlideComponent>

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:298

vertical

Controls whether the carousel has vertical alignment. Default value is false.

<igx-carousel [vertical]="true"></igx-carousel>

vertical: boolean = false

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:173

Accessors

current

The index of the slide being currently shown.

let currentSlideNumber =  this.carousel.current;

get current(): number

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:470

Returns number

interval

Returns the time interval in milliseconds before the slide changes.

let timeInterval = this.carousel.interval;

get interval(): number

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:518

Returns number

Sets the time interval in milliseconds before the slide changes. If not set, the carousel will not change slides automatically.

<igx-carousel [interval]="1000"></igx-carousel>

set interval(value: number): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:531

Parameters

value: number

Returns void

isDestroyed

Returns а boolean indicating if the carousel is destroyed.

let isDestroyed =  this.carousel.isDestroyed;

get isDestroyed(): boolean

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:494

Returns boolean

isPlaying

Returns a boolean indicating if the carousel is playing.

let isPlaying =  this.carousel.isPlaying;

get isPlaying(): boolean

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:482

Returns boolean

nativeElement

Returns a reference to the carousel element in the DOM.

let nativeElement =  this.carousel.nativeElement;

get nativeElement(): any

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:505

Returns any

resourceStrings

An accessor that returns the resource strings.

get resourceStrings(): ICarouselResourceStrings

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:397

Returns ICarouselResourceStrings

An accessor that sets the resource strings. By default it uses EN resources.

set resourceStrings(value: ICarouselResourceStrings): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:390

Parameters

value: ICarouselResourceStrings

Returns void

total

Returns the total number of slides in the carousel.

let slideCount =  this.carousel.total;

get total(): number

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:458

Returns number

touchAction

Gets the touch-action style of the list item.

let touchAction = this.listItem.touchAction;

get touchAction(): "auto" | "pan-y"

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:115

Returns "auto" | "pan-y"

Methods

add

Adds a new slide to the carousel.

this.carousel.add(newSlide);

add(slide: IgxSlideComponent): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:754

Parameters

slide: IgxSlideComponent

Returns void

get

Returns the slide corresponding to the provided index or null.

let slide1 =  this.carousel.get(1);

get(index: number): IgxSlideComponent

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:742

Parameters

index: number

Returns IgxSlideComponent

Transitions to the next slide in the carousel.

this.carousel.next();

next(): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:816

Returns void

play

Resumes playing of the carousel if in paused state. No operation otherwise.

this.carousel.play();
}

play(): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:854

Returns void

Transitions to the previous slide in the carousel.

this.carousel.prev();

prev(): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:834

Returns void

remove

Removes a slide from the carousel.

this.carousel.remove(slide);

remove(slide: IgxSlideComponent): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:769

Parameters

slide: IgxSlideComponent

Returns void

select

Switches to the passed-in slide with a given direction.

const slide = this.carousel.get(2);
this.carousel.select(slide, CarouselAnimationDirection.NEXT);

select(slide: IgxSlideComponent, direction: CarouselAnimationDirection): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:787

Parameters

slide: IgxSlideComponent
direction: CarouselAnimationDirection

Returns void

stop

Stops slide transitions if the pause option is set to true. No operation otherwise.

this.carousel.stop();
}

stop(): void

Defined in projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:873