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>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 whether the carousel should render the left/right navigation buttons.
Default value is true.
<igx-carousel [navigation] = "false"></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>Returns the role attribute of the carousel.
let carouselRole = this.carousel.role;The collection of slides currently in the carousel.
let slides: 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;Returns the tabIndex of the carousel component.
let tabIndex = this.carousel.tabIndex;Returns the total number of slides in the carousel.
let slideCount = this.carousel.total;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:
<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>