Gets/sets the animation type of carousel.
Default value is slide.
<igx-carousel animationType='none'>
<igx-carousel>
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>
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>
Returns the class of the carousel component.
let class = this.carousel.cssClass;
Controls whether the carousel should support gestures.
Default value is true.
<igx-carousel [gesturesSupport]="false"></igx-carousel>
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>
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>
Gets/sets the display mode of carousel indicators. It can be top or bottom.
Default value is bottom.
<igx-carousel indicatorsOrientation='top'>
<igx-carousel>
Controls whether the carousel should support keyboard navigation.
Default value is true.
<igx-carousel [keyboardSupport]="false"></igx-carousel>
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>
Controls the maximum indexes that can be shown.
Default value is 5.
<igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>
Controls whether the carousel should render the left/right navigation buttons.
Default value is true.
<igx-carousel [navigation]="false"></igx-carousel>
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>
Sets whether the carousel will pause the slide transitions on user interactions.
Default value is true.
<igx-carousel [pause]="false"></igx-carousel>
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>
Returns the role attribute of the carousel.
let carouselRole = this.carousel.role;
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>
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>
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>
The collection of slides currently in the carousel.
let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
The index of the slide being currently shown.
let currentSlideNumber = this.carousel.current;
Returns the time interval in milliseconds before the slide changes.
let timeInterval = this.carousel.interval;
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>
Returns а boolean indicating if the carousel is destroyed.
let isDestroyed = this.carousel.isDestroyed;
Returns a boolean indicating if the carousel is playing.
let isPlaying = this.carousel.isPlaying;
Returns a reference to the carousel element in the DOM.
let nativeElement = this.carousel.nativeElement;
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Returns the total number of slides in the carousel.
let slideCount = this.carousel.total;
Gets the touch-action style of the list item.
let touchAction = this.listItem.touchAction;
Adds a new slide to the carousel.
this.carousel.add(newSlide);
Returns the slide corresponding to the provided index or null.
let slide1 = this.carousel.get(1);
Removes a slide from the carousel.
this.carousel.remove(slide);
Kicks in a transition for a given slide with a given direction.
this.carousel.select(this.carousel.get(2), Direction.NEXT);
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: