Visão geral do carrossel Web Components

O carrossel Ignite UI for Web Components é um componente leve e responsivo que fornece a maneira mais flexível de criar uma experiência na Web semelhante a uma apresentação de slides para usuários que navegam para frente e para trás em uma coleção de imagens com slides de texto, links e outros elementos html.

O componente Carrossel Web Components permite que você use animações, transições de slides e personalização para que você possa ajustar facilmente a interface e criar Web Components carrossel personalizado.

Web Components Carousel Example

A demonstração do carrossel Web Components que você vê abaixo mostra slides contendo apenas imagens.

Usage

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

npm install igniteui-webcomponents

Você precisará importar o IgcCarouselComponent CSS necessário e registrar seu módulo, assim:

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.

Agora que você importou o Ignite UI for Web Components Carrossel, pode começar com uma configuração básica do IgcCarouselComponent e seus slides.

Use o IgcCarouselComponent seletor para quebrar seus slides. Os slides podem apresentar qualquer conteúdo html válido, incluindo outros componentes.

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

Se você quiser que um slide esteja ativo por padrão, use o Active atributo:

<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

Por padrão, o IgcCarouselComponent tem sua disableLoop propriedade definida como false (o loop ocorre quando o primeiro slide vem depois do último navegando usando a ação Avançar, ou quando o último slide vem depois do primeiro usando a ação Anterior). O comportamento de loop pode ser desabilitado definindo o disableLoop valor da propriedade como true.

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

Para acompanhar cada índice de slide, o carrossel tem indicadores posicionados no end carrossel por padrão. Para alterar esse comportamento, use a indicatorsOrientation propriedade e atribua-a a start.

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

Por padrão, o exibe IgcCarouselComponent seus botões e indicadores de navegação. Use a hideIndicators propriedade para ocultar os indicadores e a hideNavigation propriedade para ocultar os botões de navegação.

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

O IgcCarouselComponent modo vertical de suporte. Use a vertical propriedade para habilitá-la.

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

Custom indicators

Para adicionar Web Components indicadores de carrossel personalizados, use 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>

O componente Ignite UI for Web Components carrossel permite que os usuários usem diferentes elementos para o estado ativo e inativo de um único indicador. É obrigatório fornecer dois elementos para cada slot (vazio e ativo) ao declarar um indicador, mesmo que sejam iguais.

Custom navigation buttons

Para conseguir isso, use os previous-button slots e next-button:

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

O carrossel é configurado para usar a slide animação por padrão, mas também dá suporte fade como uma animação alternativa.

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.

Navigation

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

A navegação no carrossel pode ser tratada pelo usuário por meio de botões de navegação, indicadores, navegação por teclado e interação por toque em dispositivos móveis.

Touch gestures

Por padrão, o carrossel pode ser usado em qualquer dispositivo habilitado para toque.

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

Navegação pelo teclado

• 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

Eles IgcCarouselComponent podem ser facilmente configurados para alterar os slides automaticamente, sem qualquer interação do usuário. Dessa forma, você pode criar sua própria apresentação de slides definindo apenas um intervalo de transição para a propriedade, que determina a quantidade de tempo em milissegundos entre a interval transição dos slides.

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

Vamos criar um carrossel totalmente automatizado com looping ativado. Configuraremos os indicadores para serem uma representação em miniatura de cada slide.

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

• Habilite a disablePauseOnInteraction propriedade
• enable the hideNavigation property
• Habilite a vertical propriedade
• add transition interval
• adicionar personalizado IgcCarouselIndicatorComponent para cada 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>

Essas configurações terão o seguinte resultado:

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
• O elemento que serve como contêiner para o conjunto de guias (indicadores de carrossel) é com função tablist.
• Cada elemento do slide é definido com a função tabpanel.

ARIA support

componente carrossel

• Attributes
  • aria-roledescription definido como "carrossel".
  • aria-live- usado para definir a prioridade com a qual o leitor de tela deve tratar as atualizações para regiões ativas - as configurações possíveis são: off e polite. A configuração padrão é educada e é definida como o elemento que serve como contêiner para o conjunto de slides. Quando a interval opção é definida e o carrossel está em estado de reprodução, o atributo aria-live seria definido como desativado.
  • aria-label (navigation buttons) - "Previous slide"/"Next slide".

Slide component

• Attributes
  • id - segue o padrão "igc-carousel-slide-${incremented_number}".
  • aria-roledescription definido como "slide".
  • aria-label segue o padrão "${index + 1} de ${total}".

Indicator component

• Attributes
  • aria-label segue o padrão "Slide ${index + 1}"
  • ARIA-SELECTED definido como verdadeiro ou falso com base no slide ativo.

API References

• IgcCarouselComponent
• IgcCarouselSlideComponent
• IgcCarouselIndicatorComponent
• IgcIconComponent
• IgcInputComponent
• IgcButtonComponent

Additional Resources

• Ignite UI for Web Components Fóruns
• Ignite UI for Web Components GitHub