Gets/sets the animation type of carousel.
Default value is slide
.
<igx-carousel animationType='none'>
<igx-carousel>
IgxSlideComponent
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>
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>
IgxCarouselComponent
Returns the class of the carousel component.
let class = this.carousel.cssClass;
IgxCarouselComponent
Controls whether the carousel should support gestures.
Default value is true
.
<igx-carousel [gesturesSupport] = "false"></igx-carousel>
IgxCarouselComponent
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>
IgxCarouselComponent
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>
IgxSlideComponent
Controls whether the carousel should support keyboard navigation.
Default value is true
.
<igx-carousel [keyboardSupport] = "false"></igx-carousel>
IgxCarouselComponent
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>
IgxCarouselComponent
Controls the maximum indexes that can be shown.
Default value is 5
.
<igx-carousel [maximumIndicatorsCount] = "10"></igx-carousel>
IgxCarouselComponent
Controls whether the carousel should render the left/right navigation
buttons.
Default value is true
.
<igx-carousel [navigation] = "false"></igx-carousel>
IgxCarouselComponent
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>
Sets whether the carousel will pause
the slide transitions on user interactions.
Default value is true
.
<igx-carousel [pause]="false"></igx-carousel>
IgxCarouselComponent
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;
IgxCarouselComponent
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>
IgxCarouselComponent
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>
IgxCarouselComponent
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>
IgxCarouselComponent
The collection of slides
currently in the carousel.
let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
IgxCarouselComponent
The index of the slide being currently shown.
let currentSlideNumber = this.carousel.current;
IgxCarouselComponent
Returns the time interval
in milliseconds before the slide changes.
let timeInterval = this.carousel.interval;
IgxCarouselComponent
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>
IgxCarouselComponent
Returns а boolean indicating if the carousel is destroyed.
let isDestroyed = this.carousel.isDestroyed;
IgxCarouselComponent
Returns a boolean indicating if the carousel is playing.
let isPlaying = this.carousel.isPlaying;
IgxCarouselComponent
Returns a reference to the carousel element in the DOM.
let nativeElement = this.carousel.nativeElement;
IgxCarouselComponent
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;
IgxCarouselComponent
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);
IgxCarouselComponent
Returns the slide corresponding to the provided index
or null.
let slide1 = this.carousel.get(1);
IgxCarouselComponent
Removes a slide from the carousel.
this.carousel.remove(slide);
IgxCarouselComponent
Kicks in a transition for a given slide with a given direction
.
this.carousel.select(this.carousel.get(2), Direction.NEXT);
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: