The Ignite UI for Angular Carousel component is developed as a native Angular component. Use it to browse or navigate through a collection of slides, including image galleries, cards, onboarding tutorials, or page-based interfaces.

Demo

Usage

The carousel can be used as a full-screen element or situated inside another component. Also, the slides may feature any valid html content inside, including other Angular components.

First steps

Note

This component requires HammerModule to be imported in the root module of the application in order for touch interactions to work as expected.

The next step is to import the IgxCarouselModule in our app.module.ts file:

// app.module.ts

...
import { IgxCarouselModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCarouselModule],
    ...
})
export class AppModule {}

In this section we will go through the setup of the above defined demo.

Adding slides with *ngFor

If we have slides with the same type of content, the easiest approach is to use *ngFor to add them in the template.

Since our slides are going to contain only images, we are going to create an array of objects in the ts file and use it to populate the igx-carousel with slides:

...
public slides = [
      {
        src: "/assets/images/carousel/ignite-ui-angular-indigo-design.png"
      },
      {
        src: "/assets/images/carousel/slider-image-chart.png"
      },
      {
        src: "/assets/images/carousel/ignite-ui-angular-charts.png"
      }
  ];
...
...
<div class="carousel-container">
    <igx-carousel #carousel>
            <igx-slide  *ngFor="let slide of slides;">
                <div class="image-container">
                    <img [src]="slide.src">
                </div>
             </igx-slide>
    </igx-carousel>
</div>
...

Examples

Configuring IgxCarousel

By default, the carousel has its loop input property set to true ( looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action ). The looping behavior can be disabled by setting the value of the loop input to false.

To keep track of each slide index, the carousel has indicators that are positioned at the bottom of the carousel by default. In order to change this behavior, we have to use the indicatorsOrientation property and assign it to top. Indicators can be disabled by adding an empty template.

The carousel template may look like this:

<div class="carousel-container">
    <igx-carousel #carousel [loop]="false">
      ...  
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>

Custom indicators

To add custom carousel indicators we will have to use the IgxCarouselIndicatorDirective, like this:

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

Custom nav buttons

To achieve this we will use the IgxCarouselPrevButtonDirective and IgxCarouselNextButtonDirective directives:

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

Slide containing other components

This carousel is going to contain slides with forms and images:

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...
Demo

Animations

Animated slide transitions provide the end-users a nice experience when interacting with the carousel.

The carousel is configured to use the slide animation by default but it also supports fade as an alternative animation.

The animations are configured through the animationType input, like this:

<igx-carousel animationType="fade">
...
</igx-carousel>

Setting none to the animationType input disables carousel's animations.

Demo

The demo below demonstrates the different types of animations, which the carousel supports.

Transition and navigation are the most important carousel features.

The navigation in the carousel can be handled by the user through navigation buttons, keyboard navigation and pan interaction on mobile devices.

Pan gestures

By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the gesturesSupport property to false.

The carousel animations are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications (PWA).

Keyboard navigation

  • To navigate to the next/previous slide, you have to use, respectfully:
    • Arrow Right key for the next slide
    • Arrow Left key for the previous slide
  • To navigate to the end/start slide you have to use, respectfully:
    • End key for the end slide
    • Home key for the start slide

Automatic transitioning

The IgxCarousel can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the interval property, which determines the amount of time in milliseconds between slides transition.

Note

The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting pause property to false.

Advanced Example

Let's create a fully automated carousel with looping enabled. Each slide will be synced with a list item in a list. Clicking on a list item will trigger a slide change.

To achieve this goal, we have to do the following configurations to the carousel:

  • disable gesturesSupport
  • disable the navigation buttons
  • disable the carousel indicators
  • disable the pause on user interaction with the slide
  • add transition interval

Our carousel will look like this in the template:

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <div class="slides-wrapper">
            <igx-slide *ngFor="let item of slides">
                  <!-- Slides content goes here -->
             </igx-slide>
        </div>
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>
...

We are ready with the carousel configuration. Now we need only to add a list component and sync the both components:

adding IgxList:

...
<div class="list-wrapper">
    <igx-list displayDensity="compact">
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

syncing the components by hooking up on carousel's onSlideChanged and list's onItemClicked events:

  public ngOnInit() {
    ...
    this.list.onItemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.onSlideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

These configurions will have the following result:

API References

Additional Resources

Our community is active and always welcoming to new ideas.