Web Components Carousel Overview

The Ignite UI for Web Components 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 Web Components Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Web Components custom carousel.

Web Components Carousel Example

The Web Components Carousel demo you see below shows slides containing only images.

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselOverview {
    constructor() {}
}

new CarouselOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png"/>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-container {
    padding: 16px;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: fill;
    max-width: 90%;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 450px;
}

igc-carousel-slide::part(base) {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
    margin-inline: auto;
}css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

You will then need to import the IgcCarouselComponent, its necessary CSS, and register its module, like so:

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCarouselComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Now that you have the Ignite UI for Web Components Carousel imported, you can start with a basic configuration of the IgcCarouselComponent and its slides.

Use the IgcCarouselComponent selector to wrap your slides. The slides may feature any valid html content inside, including other components.

<igc-carousel>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-indigo-design.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/slider-image-chart.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-charts.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

If you want a slide to be active by default, use the Active attribute:

<igc-carousel>
    ...
    <igc-carousel-slide>
        ...
    </igc-carousel-slide>
    <igc-carousel-slide active>
        ...
    </igc-carousel-slide>
</igc-carousel>
html

If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account.

Examples

Carousel Configuration

By default, the IgcCarouselComponent has its disableLoop property set to false (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 disableLoop property to true.

<igc-carousel disable-loop="true">
    ...
</igc-carousel>
html

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.

<igc-carousel indicators-orientation="start">
    ...
</igc-carousel>
html

By default, the IgcCarouselComponent displays its navigation buttons and indicators. Use the hideIndicators property to hide the indicators and the hideNavigation property to hide the navigation buttons.

<igc-carousel hide-navigation="true" hide-indicators="true">
    ...
</igc-carousel>
html

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

<igc-carousel vertical="true">
    ...
</igc-carousel>
html

Custom indicators

To add Web Components custom carousel indicators, use the IgcCarouselIndicatorComponent:

<igc-carousel>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>

    <igc-carousel-slide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg"/>
    </igc-carousel-slide>
</igc-carousel>
html

The Ignite UI for Web Components Carousel component allows users to use different elements for the active and inactive state of a single indicator. It is mandatory to provide two elements for each slot (empty and active) when declaring an indicator, even if they are the same.

To achieve this, use the previous-button and next-button slots:

<igc-carousel>
    <igc-icon slot="previous-button" name="previous" collection="material"></igc-icon>
    <igc-icon slot="next-button" name="next" collection="material"></igc-icon>
    ...
</igc-carousel>
html

Slide containing other components

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

<igc-carousel>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <igc-input type="text" placeholder="Username">
                    <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                    <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <igc-input type="text" placeholder="Search">
                    <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
</igc-carousel>
html

Demo

import { defineComponents, IgcButtonComponent, IgcCarouselComponent, IgcIconComponent, IgcInputComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcInputComponent, IgcButtonComponent, IgcIconComponent);

const icons = [
    {
        name: "person",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/></svg>'
    },
    {
        name: "password",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z"/></svg>'
    },
    {
        name: "search",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>'
    }
];

export class CarouselComponents {
    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText);
        });
    }
}

new CarouselComponents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel With Components</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/SignUp.svg">
              <form>
                <igc-input type="text" placeholder="Username">
                  <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                  <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/Route.svg">
              <form>
                <igc-input type="text" placeholder="Search">
                  <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.carousel-container {
    padding: 16px;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 500px;
}

igc-carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

igc-carousel-slide div {
    text-align: center;
    max-width: 40%;
    margin-inline: auto;
}

igc-carousel-slide div * {
    margin-block: 8px;
}css

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.

Use the animationType property to change the animation.

<igc-carousel animation-type="fade">
    ...
</igc-carousel>
html

Setting none to the animationType property disables the animations.

Demo

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

import { defineComponents, IgcButtonComponent, IgcCardComponent, IgcCarouselComponent, IgcSelectComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcSelectComponent, IgcCardComponent, IgcButtonComponent, IgcSwitchComponent);

export class CarouselAnimations {
    private carousel: IgcCarouselComponent;
    private select: IgcSelectComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.carousel = document.querySelector('igc-carousel') as IgcCarouselComponent;
        this.select = document.querySelector('igc-select') as IgcSelectComponent;
        this.switch = document.querySelector('igc-switch') as IgcSwitchComponent;

        this.select.addEventListener("igcChange", (e) => {
            const animation = e.detail.value as 'slide' | 'fade' | 'none';
            this.carousel.animationType = animation;
        });

        this.switch.addEventListener("igcChange", (e) => {
            this.carousel.vertical = e.detail.checked;
        });
    }
}

new CarouselAnimations();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Animations</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-wrapper">
        <div class="action-wrapper">
          <div class="action">
            <span>Animation type</span>
            <igc-select id="select">
              <igc-select-item value="slide" selected>Slide</igc-select-item>
              <igc-select-item value="fade">Fade</igc-select-item>
              <igc-select-item value="none">None</igc-select-item>
            </igc-select>
          </div>
          <div class="action">
            <igc-switch label-position="before">Vertical alignment</igc-switch>
          </div>
        </div>
        <igc-carousel hide-indicators>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Angular</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>30+ Material-based Angular components to code speedy web apps faster.</p>
                </igc-card-content> 
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Javascript</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ultimate UI for ASP.NET</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/aspnet" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-wrapper {
    height: 600px;
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.action-wrapper {
    height: 40px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.action {
    display: flex;
    align-items: center;
}

.slide-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

igc-carousel {
    border: 0.5px solid #dde0e4;
}

igc-select {
    width: 150px;
    margin-left: 10px;
    --ig-size: var(--ig-size-small);
}

igc-card {
    border: none;
}

igc-card-header {
    padding: 8px 16px;
}css

Transition and navigation are the most important carousel features.

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

Touch gestures

By default, the carousel can be used on any touch-enabled device.

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).

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 IgcCarouselComponent 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.

Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. This can be prevented by setting disablePauseOnInteraction property to true.

<igc-carousel interval="2000" disable-pause-on-interaction="true">
    ...
</igc-carousel>
html

Advanced Example

Let's create a fully automated carousel with looping enabled. We will configure the indicators to be a thumbnail representation of each slide.

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

enable the disablePauseOnInteraction property
enable the hideNavigation property
enable the vertical property
add transition interval
add custom IgcCarouselIndicatorComponent for each slide

Our carousel will look like this in the template:

<igc-carousel
    disable-pause-on-interaction="true"
    hide-navigation="true"
    vertical="true"
    interval="2000"
    animation-type="fade"
>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
        
    <igc-carousel-slide>
        <img src="assets/images/carousel/WonderfulCoast.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/CulturalDip.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/GoldenBeaches.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/IslandOfHistory.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/AmazingBridge.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

These configurations will have the following result:

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselThumbnail {
    constructor() {}
}

new CarouselThumbnail();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Thumbnail</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-carousel
          disable-pause-on-interaction
          hide-navigation
          interval="2000"
          vertical
          animation-type="fade"
        >
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
        
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"
              alt="Wonderful Coast"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"
              alt="Cultural Dip"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"
              alt="Golden Beaches"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"
              alt="Island Of History"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"
              alt="Amazing Bridge"
            />
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-carousel {
    margin-inline: auto;
    max-width: 75%;
}

igc-carousel::part(indicators) {
    border-radius: 2px;
}

.blurred {
    filter: blur(2px);
    opacity: 0.5;
}css

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) is with role tablist.
Each slide element is set with role tabpanel.

ARIA support

Carousel component

Attributes
- aria-roledescription set to "carousel".
- 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 and is set to the element that serves as the container for the set of slides. When the interval option is set and the carousel is in playing state, the aria-live attribute would be set to off.
- aria-label (navigation buttons) - "Previous slide"/"Next slide".

Slide component

Attributes
- id - follows the pattern "igc-carousel-slide-${incremented_number}".
- aria-roledescription set to "slide".
- aria-label follows the pattern "${index + 1} of ${total}".

Indicator component

Attributes
- aria-label follows the pattern "Slide ${index + 1}"
- aria-selected set to true or false based on the active slide.

Web Components Carousel Overview

Web Components Carousel Example

Usage

Examples

Carousel Configuration

Custom indicators

Custom navigation buttons

Slide containing other components

Demo

Animations

Demo

Navigation

Touch gestures

Keyboard navigation

Automatic transitioning

Advanced Example

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Carousel component

Slide component

Indicator component

API References

Additional Resources