Blazor Carousel Overview

O carrossel Ignite UI for Blazor é 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 Blazor permite que você use animações, transições de slides e personalização para que você possa ajustar facilmente a interface e criar Blazor carrossel personalizado.

Blazor Carousel Example

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

Usage

Antes de usá-losIgbCarousel, você precisa registrá-los da seguinte forma:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbCarousel componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Para uma introdução completa ao Ignite UI for Blazor, leia o tópico Comecando.

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

Use oIgbCarousel seletor para enrolar seus slides. Os slides podem conter qualquer conteúdo html válido dentro, incluindo outros componentes.

<IgbCarousel>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="ignite-ui-angular-indigo-design" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="slider-image-chart" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-charts.png" alt="ignite-ui-angular-charts" />
    </IgbCarouselSlide>
</IgbCarousel>

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

<IgbCarousel>
    ...
    <IgbCarouselSlide>
        ...
    </IgbCarouselSlide>
    <IgbCarouselSlide Active="true">
        ...
    </IgbCarouselSlide>
</IgbCarousel>

Note

Se nenhum slide ativo estiver definido, o primeiro será definido por padrão. Se houver vários slides ativos na renderização inicial ou nas atualizações subsequentes, apenas o último será levado em consideração.

Examples

Carousel Configuration

Por padrão, aIgbCarousel 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.

<IgbCarousel DisableLoop="true">
    ...
</IgbCarousel>

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.

<IgbCarousel IndicatorsOrientation="@CarouselIndicatorsOrientation.Start">
    ...
</IgbCarousel>

Por padrão, eleIgbCarousel 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.

<IgbCarousel HideNavigation="true" HideIndicators="true">
    ...
</IgbCarousel>

OIgbCarousel suporte é o modo vertical. Use oVertical imóvel para viabilizá-la.

<IgbCarousel Vertical="true">
    ...
</IgbCarousel>

Custom indicators

Para adicionar Blazor indicadores personalizados para carrossel, utilize oIgbCarouselIndicator:

<IgbCarousel>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg" alt="the_red_ice_forest" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/card/media/yosemite.jpg" alt="yosemite" />
    </IgbCarouselSlide>
</IgbCarousel>

O componente Ignite UI for Blazor 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.

Para isso, use osprevious-button slots e:next-button

<IgbCarousel>
    <IgbIcon slot="previous-button" IconName="previous" Collection="material"></IgbIcon>
    <IgbIcon slot="next-button" IconName="next" Collection="material"></IgbIcon>
    ...
</IgbCarousel>

Slide containing other components

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

<IgbCarousel>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Username">
                    <IgbIcon slot="prefix" IconName="person" Collection="material" @ref="iconRef"></IgbIcon>
                </IgbInput>
                <IgbInput DisplayType="@InputType.Password" Placeholder="Password">
                    <IgbIcon slot="prefix" IconName="password" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Sign In</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Search">
                    <IgbIcon slot="prefix" IconName="search" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Search</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
</IgbCarousel>

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.

<IgbCarousel AnimationType="@CarouselAnimationType.Fade">
    ...
</IgbCarousel>

Configurarnone para aAnimationType propriedade desativa as animações.

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.

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

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

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

<IgbCarousel Interval="2000" DisablePauseOnInteraction="true">
    ...
</IgbCarousel>

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çãoIgbCarouselIndicator para cada slide

Nosso carrossel ficará assim no modelo:

<IgbCarousel DisablePauseOnInteraction="true"
             HideNavigation="true"
             Interval="2000"
             Vertical="true"
             AnimationType="@CarouselAnimationType.Fade">
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/carousel/WonderfulCoast.png" alt="WonderfulCoast" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/CulturalDip.png" alt="CulturalDip" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/GoldenBeaches.png" alt="GoldenBeaches" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/IslandOfHistory.png" alt="IslandOfHistory" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/AmazingBridge.png" alt="AmazingBridge" />
    </IgbCarouselSlide>
</IgbCarousel>

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.

Blazor Carousel Overview

Blazor Carousel Example

Usage

Note

Examples

Carousel Configuration

Custom indicators

Custom navigation buttons

Slide containing other components

Demo

Animations

Demo

Navigation

Touch gestures

Navegação pelo teclado

Automatic transitioning

Note

Advanced Example

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

componente carrossel

Slide component

Indicator component

API References

Additional Resources