Class 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>

Hierarchy

IgxCarouselComponentBase
- IgxCarouselComponent

Implements

OnDestroy
AfterContentInit
AfterViewChecked

Constructors

constructor

new IgxCarouselComponent(cdr, element, iterableDiffers, animationService, platformUtil, themeService): IgxCarouselComponent
Overrides IgxCarouselComponentBase.constructor
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:555
Parameters
- cdr: ChangeDetectorRef
- element: ElementRef<any>
- iterableDiffers: IterableDiffers
- animationService: AnimationService
- platformUtil: PlatformUtil
- themeService: ThemeService
Returns IgxCarouselComponent

Properties

animationType

animationType: HorizontalAnimationType = HorizontalAnimationType.slide

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

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

Member Of

IgxSlideComponent

carouselPaused

carouselPaused: EventEmitter<IgxCarouselComponent> = ...

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

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

Member Of

IgxCarouselComponent

carouselPlaying

carouselPlaying: EventEmitter<IgxCarouselComponent> = ...

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

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

Member Of

IgxCarouselComponent

cssClass

cssClass: string = 'igx-carousel'

Returns the class of the carousel component.

let class =  this.carousel.cssClass;

Memberof

IgxCarouselComponent

gesturesSupport

gesturesSupport: boolean = true

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

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

Member Of

IgxCarouselComponent

id

id: string = ...

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>

Memberof

IgxCarouselComponent

indicatorTemplate

indicatorTemplate: TemplateRef<any> = null

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>

indicatorsOrientation

indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom

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

<igx-carousel indicatorsOrientation='top'>
<igx-carousel>

Member Of

IgxSlideComponent

keyboardSupport

keyboardSupport: boolean = true

Controls whether the carousel should support keyboard navigation. Default value is true.

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

Member Of

IgxCarouselComponent

loop

loop: boolean = true

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>

Member Of

IgxCarouselComponent

maximumIndicatorsCount

maximumIndicatorsCount: number = 5

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

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

Member Of

IgxCarouselComponent

navigation

navigation: boolean = true

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

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

Member Of

IgxCarouselComponent

nextButtonTemplate

nextButtonTemplate: TemplateRef<any> = null

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>add</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

pause

pause: boolean = true

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

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

Member Of

IgxCarouselComponent

prevButtonTemplate

prevButtonTemplate: TemplateRef<any> = null

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.nextButtonTemplate = myCustomTemplate;

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

role

role: string = 'region'

Returns the role attribute of the carousel.

let carouselRole =  this.carousel.role;

Memberof

IgxCarouselComponent

slideAdded

slideAdded: EventEmitter<ISlideEventArgs> = ...

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

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

Member Of

IgxCarouselComponent

slideChanged

slideChanged: EventEmitter<ISlideEventArgs> = ...

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

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

Member Of

IgxCarouselComponent

slideRemoved

slideRemoved: EventEmitter<ISlideEventArgs> = ...

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

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

Member Of

IgxCarouselComponent

slides

slides: QueryList<IgxSlideComponent>

The collection of slides currently in the carousel.

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

Member Of

IgxCarouselComponent

theme

theme: string

Sets the theme of the carousel component.

Accessors

current

get current(): number
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:489
The index of the slide being currently shown.
```
let currentSlideNumber =  this.carousel.current;
```
Member Of
IgxCarouselComponent

Returns number

interval

get interval(): number
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:537
Returns the time interval in milliseconds before the slide changes.
```
let timeInterval = this.carousel.interval;
```
Memberof
IgxCarouselComponent

Returns number
set interval(value): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:550
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>
```
Memberof
IgxCarouselComponent

Parameters
- value: number
Returns void

isDestroyed

get isDestroyed(): boolean
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:513
Returns а boolean indicating if the carousel is destroyed.
```
let isDestroyed =  this.carousel.isDestroyed;
```
Member Of
IgxCarouselComponent

Returns boolean

isPlaying

get isPlaying(): boolean
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:501
Returns a boolean indicating if the carousel is playing.
```
let isPlaying =  this.carousel.isPlaying;
```
Member Of
IgxCarouselComponent

Returns boolean

isTypeIndigo

get isTypeIndigo(): boolean
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:710
Returns true if the IgxCarouselComponent theme is Indigo.
```
@ViewChild("carousel")
public carousel: IgxCarouselComponent;

ngAfterViewInit(){
   let isTypeIndigo = this.carousel.isTypeIndigo;
}
```
Returns boolean

nativeElement

get nativeElement(): any
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:524
Returns a reference to the carousel element in the DOM.
```
let nativeElement =  this.carousel.nativeElement;
```
Memberof
IgxCarouselComponent

Returns any

resourceStrings

get resourceStrings(): ICarouselResourceStrings
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:419
An accessor that returns the resource strings.

Returns ICarouselResourceStrings
set resourceStrings(value): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:412
An accessor that sets the resource strings. By default it uses EN resources.

Parameters
- value: ICarouselResourceStrings
Returns void

total

get total(): number
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:477
Returns the total number of slides in the carousel.
```
let slideCount =  this.carousel.total;
```
Member Of
IgxCarouselComponent

Returns number

touchAction

get touchAction(): "auto" | "pan-y"
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:142
Gets the touch-action style of the list item.
```
let touchAction = this.listItem.touchAction;
```
Returns "auto" | "pan-y"

Methods

add

add(slide): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:758
Adds a new slide to the carousel.
```
this.carousel.add(newSlide);
```
Member Of
IgxCarouselComponent

Parameters
- slide: IgxSlideComponent
Returns void

get

get(index): IgxSlideComponent
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:746
Returns the slide corresponding to the provided index or null.
```
let slide1 =  this.carousel.get(1);
```
Member Of
IgxCarouselComponent

Parameters
- index: number
Returns IgxSlideComponent

next(): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:805
Transitions to the next slide in the carousel.
```
this.carousel.next();
```
Member Of
IgxCarouselComponent

Returns void

play

play(): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:843
Resumes playing of the carousel if in paused state. No operation otherwise.
```
this.carousel.play();
}
```
Member Of
IgxCarouselComponent

Returns void

prev(): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:823
Transitions to the previous slide in the carousel.
```
this.carousel.prev();
```
Member Of
IgxCarouselComponent

Returns void

remove

remove(slide): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:773
Removes a slide from the carousel.
```
this.carousel.remove(slide);
```
Member Of
IgxCarouselComponent

Parameters
- slide: IgxSlideComponent
Returns void

select

select(slide, direction?): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:790
Kicks in a transition for a given slide with a given direction.
```
this.carousel.select(this.carousel.get(2), Direction.NEXT);
```
Member Of
IgxCarouselComponent

Parameters
- slide: IgxSlideComponent
- direction: Direction = Direction.NONE
Returns void

stop

stop(): void
- Defined in projects/igniteui-angular/src/lib/carousel/carousel.component.ts:862
Stops slide transitions if the pause option is set to true. No operation otherwise.
```
 this.carousel.stop();
}
```
Member Of
IgxCarouselComponent

Returns void

Class IgxCarouselComponent

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

cdr: ChangeDetectorRef

element: ElementRef<any>

iterableDiffers: IterableDiffers

animationService: AnimationService

platformUtil: PlatformUtil

themeService: ThemeService

Returns IgxCarouselComponent

Properties

animationType

Member Of

carouselPaused

Member Of

carouselPlaying

Member Of

cssClass

Memberof

gesturesSupport

Member Of

id

Memberof

indicatorTemplate

indicatorsOrientation

Member Of

keyboardSupport

Member Of

loop

Member Of

maximumIndicatorsCount

Member Of

navigation

Member Of

nextButtonTemplate

pause

Member Of

prevButtonTemplate

role

Memberof

slideAdded

Member Of

slideChanged

Member Of

slideRemoved

Member Of

slides

Member Of

theme

Accessors

current

Member Of

Returns number

interval

Memberof

Returns number

Memberof

Parameters

value: number

Returns void

isDestroyed

Member Of

Returns boolean

isPlaying

Member Of

Returns boolean

isTypeIndigo

Returns boolean

nativeElement

Memberof

Returns any

resourceStrings