Gets/sets the animation type of carousel.
Default value is slide.
<igx-carousel animationType='none'>
<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 igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>add</igx-icon>
</button>
</ng-template>
</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 (onCarouselPaused)="onCarouselPaused($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 (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel>
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 (onSlideAdded)="onSlideAdded($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 (onSlideChanged)="onSlideChanged($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 (onSlideRemoved)="onSlideRemoved($event)"></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.nextButtonTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-carousel #carousel>
...
<ng-template igxCarouselPrevButton let-disabled>
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>remove</igx-icon>
</button>
</ng-template>
</igx-carousel>
Returns the role attribute of the carousel.
let carouselRole = this.carousel.role;
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);
Transitions to the next slide in the carousel.
this.carousel.next();
Resumes playing of the carousel if in paused state. No operation otherwise.
this.carousel.play();
}
Transitions to the previous slide in the carousel.
this.carousel.prev();
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);
Stops slide transitions if the pause option is set to true.
No operation otherwise.
this.carousel.stop();
}
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: