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ê então precisará importar oIgcCarouselComponent 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 Comecando.

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

Use oIgcCarouselComponent seletor para enrolar seus slides. Os slides podem conter qualquer conteúdo html válido dentro, 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ê quer que um slide esteja ativo por padrão, use oActive 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, aIgcCarouselComponent propriedade estádisableLoop definida como false (o looping ocorre quando o primeiro slide vem depois do último navegando usando a ação Próxima, ou quando o último slide vem após o primeiro usando a ação Anterior). O comportamento de looping pode ser desativado definindo o valor dadisableLoop propriedade como verdadeiro.

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

Para acompanhar cada índice de slide, o carrossel possui indicadores posicionados por padrão naend parte do carrossel. Para mudar esse comportamento, use aindicatorsOrientation propriedade e astart atribua.

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

Por padrão, eleIgcCarouselComponent exibe seus botões de navegação e indicadores. Use ahideIndicators propriedade para esconder os indicadores e ahideNavigation propriedade para ocultar os botões de navegação.

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

OIgcCarouselComponent suporte é o modo vertical. Use overtical imóvel para viabilizá-la.

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

Custom indicators

Para adicionar Web Components indicadores personalizados para carrossel, utilize oIgcCarouselIndicatorComponent:

<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" alt="the_red_ice_forest" />
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg" alt="yosemite" />
    </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 isso, use osprevious-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 aslide animação por padrão, mas também suportafade como animação alternativa.

Use aanimationType propriedade para mudar a animação.

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

Configurarnone para aanimationType propriedade desativa as animações.

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
  • SPACE ou ENTER chave - navega para o slide seguinte/anterior.
• Indicadores
  • 🡐 key - navega para o slide anterior (próximo no modo Da direita para a esquerda).
  • 🡒 key - navega para o próximo slide (anterior no modo Da direita para a esquerda).
  • HOME key - navega até o primeiro slide (último no modo Da direita para a esquerda).
  • END key - navega até o último slide (primeiro no modo da direita para a esquerda).

Automatic transitioning

ElesIgcCarouselComponent 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 ainterval propriedade, que determina o tempo em milissegundos entre a transição do slide.

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

• Permitir adisablePauseOnInteraction propriedade
• Permitir ahideNavigation propriedade
• Permitir avertical propriedade
• adicionar transiçãointerval
• adicione customizaçãoIgcCarouselIndicatorComponent 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

• O papel do elemento base Carousel éregion uma seção contendo conteúdo relevante para um propósito específico e que os usuários provavelmente vão querer navegar facilmente.
• Os indicadores de carrossel possuem um rótulo de agrupamento de funçãotab que fornece um mecanismo para selecionar o conteúdo da aba que será exibido ao usuário
• O elemento que serve como contêiner para o conjunto de abas (indicadores de carrossel) é com funçãotablist.
• Cada elemento do slide é definido com seu papeltabpanel.

ARIA support

componente carrossel

• Attributes
  • aria-roledescription definido como "carrossel".
  • Aria-Live- usado para definir a prioridade com qual leitor de tela deve tratar as atualizações das regiões ao vivo - as configurações possíveis são: Desligado e Educado. A configuração padrão é educada e está definida para o elemento que serve como recipiente para o conjunto de slides. Quando ainterval opção está definida e o carrossel está em estado de reprodução, o atributo aria-live fica desligado.
  • 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