Carousel Component

The Ignite UI for Angular Carousel is a slide-based layout component for presenting images, cards, or other content with navigation controls and indicators.

Use the Carousel when users need to browse a small collection of related slides one at a time, with optional animation, custom navigation, and automatic transitions.

Live Demo

Anatomy

The Carousel component is composed of a host element, projected slides, navigation controls, and indicators that select the active slide.

igx-carousel                     // host - coordinates slides, navigation, and indicators
|- igx-slide                      // slide item
|- ng-template[igxCarouselIndicator]   // optional custom indicator template
|- ng-template[igxCarouselPrevButton]  // optional previous navigation template
`- ng-template[igxCarouselNextButton]  // optional next navigation template

Getting Started

The Angular Carousel requires the carousel component, slide component, and theme stylesheet before you declare slides.

Install Ignite UI for Angular and configure the theme from the Getting Started topic before adding the Carousel to an application.

Import the Carousel directives and the Ignite UI theme stylesheet.

import { Component } from '@angular/core';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';

@Component({
    selector: 'app-carousel-sample',
    imports: [IGX_CAROUSEL_DIRECTIVES],
    template: `
        <igx-carousel>
            <igx-slide>
                <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
            </igx-slide>
        </igx-carousel>
    `,
})
export class CarouselSampleComponent {}

Usage

The Angular Carousel is configured by placing slide components inside the host and then enabling the navigation, indicator, and transition behavior your layout needs.

Slides

Use the Carousel selector to wrap your slides. The slides may contain images, text, forms, or other components.

<igx-carousel>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="Chart preview" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-charts.png" alt="Ignite UI Charts" />
    </igx-slide>
</igx-carousel>

Active Slide

Set the active input on the slide that should be selected when the Carousel renders.

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

Configuration

Use the Carousel configuration properties to control looping, indicator placement, navigation visibility, and orientation.

Use the loop input to control whether the Carousel wraps from the last slide to the first slide, or from the first slide to the last slide.

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

Use the indicatorsOrientation property to change where the indicators are positioned.

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

Use indicators to hide the indicators and navigation to hide the navigation buttons.

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

Use the vertical property to display the Carousel in vertical mode.

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

Custom Indicators

Use the IgxCarouselIndicatorDirective template directive to replace the default indicator content.

<igx-carousel>
    <ng-template igxCarouselIndicator let-slide>
        <div [ngClass]="{ selected: slide.current === current }"></div>
    </ng-template>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="Chart preview" />
    </igx-slide>
</igx-carousel>

Custom Navigation Buttons

Use the IgxCarouselPrevButtonDirective and IgxCarouselNextButtonDirective template directives to provide custom navigation button content.

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

Use text, SVG, or Icon content in these templates when the default navigation controls do not fit the design.

Slide Content

Place forms, images, and other components inside a slide when each step in the Carousel needs richer content.

<igx-carousel>
    <igx-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg" alt="Sign up" />
            <form>
                <igx-input-group>
                    <igx-prefix>
                        <igx-icon>person</igx-icon>
                    </igx-prefix>
                    <input igxInput type="text" placeholder="Username" />
                </igx-input-group>
                <igx-input-group>
                    <igx-prefix>
                        <igx-icon>password</igx-icon>
                    </igx-prefix>
                    <input igxInput type="password" placeholder="Password" />
                </igx-input-group>
                <button igxButton="contained" type="reset">Sign In</button>
            </form>
        </div>
    </igx-slide>
</igx-carousel>

Animations

Set the animationType property to change the slide transition animation.

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

Set the animationType property to none to disable animations.

Touch Gestures

Use the Carousel on touch-enabled devices when swipe navigation should mirror the configured slide transition.

Set the gesturesSupport input to false when pan gestures should be disabled.

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

Automatic Transitioning

Set the interval input to create an automatic slideshow, and set pause to false when transitioning should not pause on interaction.

<igx-carousel [interval]="2000" [pause]="false">
    ...
</igx-carousel>

Thumbnail Indicators

Use the IgxCarouselIndicatorDirective template directive with a thumbnail image for each indicator when indicators should preview their corresponding slide.

<igx-carousel [navigation]="false" [pause]="false" [interval]="2000" [vertical]="true" animationType="fade">
    <ng-template igxCarouselIndicator let-slide>
        <img
            [class.blurred]="!slide.active"
            [src]="slides[slide.index].thumbnail"
            [alt]="slides[slide.index].alt + ' thumbnail'"
            width="50"
            height="60" />
    </ng-template>

    @for (slide of slides; track slide.image) {
        <igx-slide>
            <img class="slide-image" [src]="slide.image" [alt]="slide.alt" />
        </igx-slide>
    }
</igx-carousel>

Do/Don’t

When to use: Use Carousel when the interface needs to show a compact set of related visual or mixed-content slides that users browse one at a time.

When not to use: Do not use Carousel for primary navigation, long sequential workflows, or content users must compare side by side. Use Tabs for switching between named sections, or Stepper for guided sequential tasks.

Do	Don’t

Properties

The following Carousel properties cover the configuration used most often in slide-based layouts.

Styling

The Carousel can be styled through its exposed parts, custom indicator content, and custom navigation slots.

Sass Theming

Use Sass theming when the Carousel needs theme-level changes that should stay consistent across the application.

Use $button-background and $indicator-background as the primary theme parameters. The theme derives related interaction-state colors from them; use the remaining parameters for specific refinements.

Parts and Slots

Use the exposed slots and parts when only a specific Carousel surface needs custom content or local styling.

Styling with Tailwind

Use Tailwind utility classes with the Ignite UI for Angular Carousel when you need utility-first layout styling together with Ignite UI component tokens.

Accessibility

The Angular Carousel exposes carousel, slide, and indicator semantics for keyboard and assistive technology users.

Keyboard Interaction

Screen Readers / ARIA

The Carousel provides ARIA roles and state for the host, slides, indicators, and navigation controls.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Application authors still need to provide meaningful slide content, image alternative text, and enough contrast for custom indicator or navigation content.

API References

Dependencies

The Carousel examples rely on the Carousel slide and indicator types, the theme stylesheet, and supporting input, icon, and button components when those components appear inside slides or navigation slots.

Additional Resources

Use these resources for broader product support and source information.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

Use these related layout components when Carousel is not the best match for the interaction model.

• Tabs - Use Tabs when users need to switch between named sections without slide-style navigation.
• Stepper - Use Stepper when users need to complete a guided sequence of steps.

FAQ