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

  • IgxCarouselComponent

Implements

  • OnDestroy

Constructors

constructor

Properties

id

id: string = `igx-carousel-${NEXT_ID++}`

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

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

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

IgxCarouselComponent

onCarouselPaused

onCarouselPaused: EventEmitter<IgxCarouselComponent> = new 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 (onCarouselPaused)="onCarouselPaused($event)"></igx-carousel>
memberof

IgxCarouselComponent

onCarouselPlaying

onCarouselPlaying: EventEmitter<IgxCarouselComponent> = new 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 (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel>
memberof

IgxCarouselComponent

onSlideAdded

onSlideAdded: EventEmitter<ISlideEventArgs> = new 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 (onSlideAdded)="onSlideAdded($event)"></igx-carousel>
memberof

IgxCarouselComponent

onSlideChanged

onSlideChanged: EventEmitter<ISlideEventArgs> = new 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 (onSlideChanged)="onSlideChanged($event)"></igx-carousel>
memberof

IgxCarouselComponent

onSlideRemoved

onSlideRemoved: EventEmitter<ISlideEventArgs> = new 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 (onSlideRemoved)="onSlideRemoved($event)"></igx-carousel>
memberof

IgxCarouselComponent

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

IgxCarouselComponent

role

role: string = "region"

Returns the role attribute of the carousel.

let carouselRole =  this.carousel.role;
memberof

IgxCarouselComponent

slides

slides: IgxSlideComponent[] = []

The collection of slides currently in the carousel.

let slides: IgxSlideComponent[] = this.carousel.slides;
memberof

IgxCarouselComponent

Accessors

current

  • get current(): number
  • The index of the slide being currently shown.

    let currentSlideNumber =  this.carousel.current;
    memberof

    IgxCarouselComponent

    Returns number

interval

  • get interval(): number
  • set interval(value: number): void
  • Returns the time interval in milliseconds before the slide changes.

    let timeInterval = this.carousel.interval;
    memberof

    IgxCarouselComponent

    Returns number

  • Sets the time interval in milliseconds before the slide changes. If not set, the carousel will not change slides automatically.

    <igx-carousel [interval] = "1000"></carousel>
    memberof

    IgxCarouselComponent

    Parameters

    • value: number

    Returns void

isDestroyed

  • get isDestroyed(): boolean
  • Returns а boolean indicating if the carousel is destroyed.

    let isDestroyed =  this.carousel.isDestroyed;
    memberof

    IgxCarouselComponent

    Returns boolean

isPlaying

  • get isPlaying(): boolean
  • Returns a boolean indicating if the carousel is playing.

    let isPlaying =  this.carousel.isPlaying;
    memberof

    IgxCarouselComponent

    Returns boolean

nativeElement

  • get nativeElement(): any
  • Returns a reference to the carousel element in the DOM.

    let nativeElement =  this.carousel.nativeElement;
    memberof

    IgxCarouselComponent

    Returns any

tabIndex

  • get tabIndex(): number

total

  • get total(): number

Methods

add

get

next

  • next(): void

play

  • play(): void
  • Resumes playing of the carousel if in paused state. No operation otherwise.

    this.carousel.play();
    }
    memberof

    IgxCarouselComponent

    Returns void

prev

  • prev(): void

remove

select

stop

  • stop(): void
  • Stops slide transitions if the pause option is set to true. No operation otherwise.

     this.carousel.stop();
    }
    memberof

    IgxCarouselComponent

    Returns void