Angular Carousel Component Overview

    Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements.

    The Angular Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Angular custom carousel.

    The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth.

    To get started with the Ignite UI for Angular Carousel component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

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

    Note

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

    // app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Alternatively, as of 16.0.0 you can import the IgxCarouselComponent as a standalone dependency, or use the IGX_CAROUSEL_DIRECTIVES token to import the component and all of its supporting components and directives.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}

    Now that you have the Ignite UI for Angular Carousel module or directives imported, you can start using the igx-carousel component.

    The Ignite UI for Angular Carousel component 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.

    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:

    @Component({...})
export class HomeComponent {
    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>

    Configuring IgxCarousel

    By default, the Carousel in Angular 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.

    <igx-carousel [loop]="false">
    ...
</igx-carousel>

    To keep track of each slide index, the carousel has indicators that are positioned at the end of the carousel by default. In order to change this behavior, use the indicatorsOrientation property and assign it to start.

    <igx-carousel indicatorsOrientation="start">
    ...
</igx-carousel>

    By default, the IgxCarousel displays its navigation buttons and indicators. Use the indicators property to hide the indicators and the navigation property to hide the navigation buttons.

    <igx-carousel [navigation]="false" [indicators]="false">
    ...
</igx-carousel>

    The IgxCarousel supports vertical mode. Use the vertical property to enable it.

    <igx-carousel [vertical]="true">
    ...
</igx-carousel>

    Custom indicators

    To add Angular 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="contained" 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="contained" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

    Demo

    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

    • Navigation buttons
      • Space/Enter key - navigates to the next/previous slide.
    • Indicators
      • Arrow Left key - navigates to the previous (next in Right-to-Left mode) slide.
      • Arrow Right key - navigates to the next (previous in Right-to-Left mode) slide.
      • Home key - navigates to the first (last in Right-to-Left mode) slide.
      • End key - navigates to the last (first in Right-to-Left mode) 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" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <igx-slide *ngFor="let item of slides">
            <!-- Slides content goes here -->
        </igx-slide>
    </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>
      <!-- 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 slideChanged and list's itemClicked events:

    Note

    As of v15.1.0 onSlideChanged was renamed to slideChanged. Using ng update will automatically migrate your code prior to use the new event name.

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

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

    These configurations will have the following result:

    When you modify a primary property, all related dependent properties are automatically updated to reflect the change:

    Primary Property Dependent Property Description
    $button-background
    		 $button-hover-background The background color of the button on hover.
    $button-arrow-colorThe color of the button arrow.
    $button-disabled-backgroundThe background color of the button when disabled.
    $indicator-focus-color
    (When $indicator-background is not provided)    		The color of the indicator when focused.
    $button-hover-background $button-hover-arrow-color The color of the button arrow on hover.
    $button-disabled-background $button-disabled-arrow-color The color of the button arrow when disabled.
    $button-hover-arrow-color $button-focus-arrow-color The color of the button arrow when focused.
    $button-focus-arrow-color $button-focus-border-color The border color of the button when focused.
    $indicator-background
    		 $indicator-border-color The color of the indicator border.
    $indicator-active-dot-colorThe color of the indicator dot when active.
    $indicator-focus-colorThe color of the indicator when focused.
    $indicator-active-dot-color
    		 $indicator-active-hover-dot-color The color of the indicator when active and hovered.
    $indicator-active-border-colorThe color of the indicator border when active.
    $indicator-dot-color $indicator-hover-dot-color The color of the indicator dot on hover.
    Primary Property Dependent Property Description
    $button-background
    		 $button-hover-background The background color of the button on hover.
    $button-arrow-colorThe color of the button arrow.
    $button-disabled-backgroundThe background color of the button when disabled.
    $button-focus-border-colorThe border color of the button when focused.
    $indicator-focus-color
    (When $indicator-background is not provided)    		The color of the indicator when focused.
    $button-hover-background $button-hover-arrow-color The color of the button arrow on hover.
    $button-disabled-background $button-disabled-arrow-color The color of the button arrow when disabled.
    $button-hover-arrow-color $button-focus-arrow-color The color of the button arrow when focused.
    $indicator-background
    		 $indicator-border-color The color of the indicator border.
    $indicator-active-dot-colorThe color of the indicator dot when active.
    $indicator-focus-colorThe color of the indicator when focused.
    $indicator-active-dot-color
    		 $indicator-active-hover-dot-color The color of the indicator when active and hovered.
    $indicator-active-border-colorThe color of the indicator border when active.
    $indicator-dot-color $indicator-hover-dot-color The color of the indicator dot on hover.
    Primary Property Dependent Property Description
    $button-background
    		 $button-hover-background The background color of the button on hover.
    $button-arrow-colorThe color of the button arrow.
    $button-disabled-backgroundThe background color of the button when disabled.
    $button-focus-border-colorThe border color of the button when focused.
    $indicator-focus-color
    (When $indicator-background is not provided)    		The color of the indicator when focused.
    $button-hover-background $button-hover-arrow-color The color of the button arrow on hover.
    $button-disabled-background $button-disabled-arrow-color The color of the button arrow when disabled.
    $button-hover-arrow-color $button-focus-arrow-color The color of the button arrow when focused.
    $indicator-background
    		 $indicator-border-color The color of the indicator border.
    $indicator-active-dot-colorThe color of the indicator dot when active.
    $indicator-focus-colorThe color of the indicator when focused.
    $indicator-active-dot-color
    		 $indicator-active-hover-dot-color The color of the indicator when active and hovered.
    $indicator-active-border-colorThe color of the indicator border when active.
    $indicator-dot-color $indicator-hover-dot-color The color of the indicator dot on hover.
    Primary Property Dependent Property Description
    $button-background
    		 $button-hover-background The background color of the button on hover.
    $button-border-colorThe border color of the button.
    $button-arrow-colorThe color of the button arrow.
    $button-disabled-backgroundThe background color of the button when disabled.
    $indicator-active-dot-color
    (When $indicator-background is not provided)    		The color of the indicator dot when active.
    $button-hover-background $button-hover-arrow-color The color of the button arrow on hover.
    $button-disabled-background $button-disabled-arrow-color The color of the button arrow when disabled.
    $button-border-color $button-hover-border-color The border color of the button on hover.
    $button-hover-arrow-color $button-focus-arrow-color The color of the button arrow when focused.
    $indicator-background
    		 $indicator-dot-color The color of the indicator dot.
    $indicator-active-dot-colorThe color of the indicator dot when active.
    $indicator-dot-color
    		 $indicator-hover-dot-color The color of the indicator dot on hover.
    $indicator-border-colorThe color of the indicator border.
    $indicator-active-dot-color
    		 $indicator-active-hover-dot-color The color of the indicator when active and hovered.
    $indicator-active-border-colorThe color of the indicator border when active.
    $button-focus-border-colorThe border color of the button when focused.
    $indicator-active-hover-dot-color $indicator-focus-color The color of the indicator when focused.

    Using the Ignite UI for Angular Theming, we can greatly alter the carousel appearance.

    First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the carousel-theme, and by providing just a few base parameters like $button-background and $indicator-background, the theme will generate the appropriate state-specific colors and contrasting foregrounds. You can also override any of the available parameters if you want more control over the appearance.

    $carousel-theme: carousel-theme(
  $button-background: #7c32dd,
  $indicator-background: #7c32dd,
);

    The last step is to include the component's theme.

    @include css-vars($carousel-theme);

    Demo

    The sample below demonstrates a simple styling applied through the Ignite UI for Angular Theming.

    Styling with Tailwind

    You can style the carousel using our custom Tailwind utility classes. Make sure to set up Tailwind first.

    Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    The utility file includes both light and dark theme variants.

    • Use light-* classes for the light theme.
    • Use dark-* classes for the dark theme.
    • Append the component name after the prefix, e.g., light-carousel, dark-carousel.

    Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

    You can find the full list of properties in the carousel-theme. The syntax is as follows:

    <igx-carousel class="!light-carousel
![--indicator-background:#a7b6de] 
![--button-background:#a7b6de] 
![--indicator-border-color:#3E4853]">
  ...
</igx-carousel>
    Note

    The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

    At the end your carousel should look like this:

    Accessibility

    WAI-ARIA Roles, States, and Properties

    • The Carousel base element role is region - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily.
    • Carousel indicators are with role tab - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user
    • The element that serves as the container for the set of tabs (carousel indicators) role is set to tablist.
    • Each slide element is set with role tabpanel.
    • The element that serves as the container for the set of igx-slides is set with aria-live="polite". Both options are
      • off: if the carousel is automatically rotating.
      • polite: if the carousel is NOT automatically rotating.

    ARIA support

    Attributes
    • aria-roledescription set to 'carousel'.
    • aria-selected- set to true or false based on the active slide.
    • aria-controls - set a slide index whose content is controlled by the current element.
    • aria-live - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off and polite. The default setting is polite. When the interval option set, the aria-live attribute would be set to off.
    • aria-label slide based.
    • aria-label (buttons)
      • aria-label - for previous slide.
      • aria-label - for next slide.

    Slide component

    Roles
    • attr.role="tabpanel" - container for the resources associated with a tab, where each tab is contained in a tablist.
    Attributes
    • id - follows the pattern "panel-${this.index}"
    • aria-labelledby follows the pattern "tab-${this.index}-${this.total}"
    • aria-selected set active slide. Indicates the current selected state of a particular slide element.

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.