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.

Usage

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

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

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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>

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>

[!NOTE] 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>

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>

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>

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

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

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>

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>

Slide containing other components

Este carrossel conterá slides com formulários e imagens:

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

Demo

Animations

Transições de slides animadas proporcionam aos usuários finais uma experiência agradável ao interagir com o carrossel.

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>

Setting none to the animationType property disables the animations.

Demo

A demonstração abaixo demonstra os diferentes tipos de animações que o carrossel suporta.

Transição e navegação são os recursos mais importantes do carrossel.

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.

As animações de carrossel são totalmente suportadas em dispositivos touch, o que torna o carrossel consistente com qualquer plataforma e ótimo quando usado em aplicativos web progressivos (PWA).

Botões de navegação
- Tecla Space / Enter- navega para o slide seguinte/anterior.
Indicadores
- Tecla Arrow Left- navega para o slide anterior (próximo no modo da direita para a esquerda).
- Tecla Arrow Right- navega para o próximo slide (anterior no modo da direita para a esquerda).
- Tecla Home- navega para o primeiro (último no modo da direita para a esquerda) slide.
- Tecla End- navega para o último slide (primeiro no modo da direita para a esquerda).

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.

[!NOTE] 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>

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.

Para atingir esse objetivo, temos que fazer as seguintes configurações no carrossel:

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

Nosso carrossel ficará assim no modelo:

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

These configurations will have the following result:

Accessibility

WAI-ARIA Roles, States, and Properties

A função do elemento base do Carrossel é region- seção que contém conteúdo relevante para um propósito específico e que os usuários provavelmente desejarão navegar facilmente.
Os indicadores de carrossel têm uma função de tab- rótulo de agrupamento que fornece um mecanismo para selecionar o conteúdo da guia que deve ser renderizado ao usuário
The element that serves as the container for the set of tabs (carousel indicators) is with role tablist.
Cada elemento do slide é definido com a função 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

Navegação pelo teclado

Automatic transitioning

Advanced Example

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Carousel component

Slide component

Indicator component

API References

Additional Resources