Visão geral do componente Angular Carousel

Ignite UI for Angular Carousel é um componente leve e responsivo que fornece a maneira mais flexível de criar uma experiência 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 Angular Carousel permite que você use animações, transições de slides e personalização para que você possa facilmente ajustar a interface e criar um carrossel Angular personalizado.

Angular Carousel Example

A demonstração do Angular Carousel que você vê abaixo mostra slides contendo apenas imagens. Habilitamos botões de navegação permitindo que os usuários movam facilmente de um slide para outro – indo e voltando.

Getting Started with Ignite UI for Angular Carousel

Para começar a usar o componente Ignite UI for Angular Carousel, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxCarouselModule em nosso arquivo app.module.ts:

Note

Este componente pode utilizar o HammerModule opcionalmente. Ele pode ser importado no módulo raiz do aplicativo para que as interações de toque funcionem conforme o esperado.

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., HammerModule, IgxCarouselModule],
    ...
})
export class AppModule {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxCarouselComponent como uma dependência autônoma ou usar o token IGX_CAROUSEL_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}

Agora que você importou o módulo Ignite UI for Angular Carousel ou as diretivas, você pode começar a usar o componente igx-carousel.

Using the Angular Carousel Component

O componente Ignite UI for Angular Carousel pode ser usado como um elemento de tela cheia ou situado dentro de outro componente. Além disso, os slides podem apresentar qualquer conteúdo html válido dentro, incluindo outros componentes Angular.

Nesta seção, abordaremos a configuração da demonstração definida acima.

Adding slides with *ngFor

Se tivermos slides com o mesmo tipo de conteúdo, a abordagem mais fácil é usar *ngFor para adicioná-los ao modelo.

Como nossos slides conterão apenas imagens, criaremos uma matriz de objetos no arquivo ts e o usaremos para preencher o igx-carousel com slides:

@Component({...})
export class HomeComponent {
    public slides = [
        { src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' },
        { src: '/assets/images/carousel/slider-image-chart.png' },
        { src: '/assets/images/carousel/ignite-ui-angular-charts.png' }
    ];
}

<div class="carousel-container">
    <igx-carousel #carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
</div>

Angular Carousel Custom Examples

Configuring IgxCarousel

Por padrão, o Carousel no Angular tem sua propriedade de entrada loop definida como true (o loop ocorre quando o primeiro slide vem depois do último, navegando usando a ação Next, ou quando o último slide vem depois do primeiro, usando a ação Previous). O comportamento de loop pode ser desabilitado definindo o valor da entrada loop como false.

Para manter o controle de cada índice de slide, o carrossel tem indicadores que são posicionados na bottom do carrossel por padrão. Para alterar esse comportamento, temos que usar a propriedade indicatorsOrientation e atribuí-la a top. Os indicadores podem ser desabilitados definindo a propriedade de entrada indicators como false.

Custom indicators

Para adicionar indicadores de carrossel personalizados Angular, teremos que usar o IgxCarouselIndicatorDirective, assim:

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

Custom nav buttons

Para conseguir isso, usaremos as diretivas IgxCarouselPrevButtonDirective e IgxCarouselNextButtonDirective:

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

Slide containing other components

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

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

Demo

Angular Carousel 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 animação slide por padrão, mas também suporta fade como uma animação alternativa.

As animações são configuradas através da entrada animationType, assim:

<igx-carousel animationType="fade">
...
</igx-carousel>

Definir none para a entrada animationType desabilita as animações do carrossel.

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 controlada pelo usuário por meio de botões de navegação, navegação pelo teclado e interação panorâmica em dispositivos móveis.

Pan gestures

Por padrão, o carrossel pode ser usado em qualquer dispositivo habilitado para toque. Isso é opcional e pode ser alterado definindo a propriedade gesturesSupport como false.

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

O IgxCarousel pode ser facilmente configurado para alterar os slides automaticamente, sem nenhuma 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 interval, que determina a quantidade de tempo em milissegundos entre a transição dos slides.

Note

A transição automática de slides não é totalmente independente do usuário por padrão. Posicionar o ponteiro do mouse sobre um slide interromperá a transição do slide atual até que o ponteiro do mouse deixe a área do slide. Isso pode ser evitado definindo a propriedade pause como false.

Advanced Example

Vamos criar um carrossel totalmente automatizado com looping habilitado. Cada slide será sincronizado com um item de lista em uma lista. Clicar em um item de lista acionará uma mudança de slide.

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

• desabilitar gesturesSupport
• desabilitar os botões navigation​
• desabilitar os indicators do carrossel
• desabilitar a pause na interação do usuário com o slide
• adicionar interval de transição

Nosso carrossel ficará assim no modelo:

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <igx-slide *ngFor="let item of slides">
            <!-- Slides content goes here -->
        </igx-slide>
    </igx-carousel>
</div>
...

Estamos prontos com a configuração do carrossel. Agora precisamos apenas adicionar um componente de lista e sincronizar os dois componentes:

adding IgxList:

...
<div class="list-wrapper">
    <igx-list>
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

sincronizando os componentes conectando-os aos eventos slideChanged do carrossel e itemClicked da lista:

Note

A partir da v15.1.0, onSlideChanged foi renomeado para slideChanged. Usar ng update migrará automaticamente seu código antes de usar o novo nome de evento.

  public ngOnInit() {
    this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

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 a função do conjunto de guias (indicadores de carrossel) é definido como tablist.
• Cada elemento do slide é definido com a função tabpanel.
• O elemento que serve como contêiner para o conjunto de igx-slides é definido com aria-live ="polite". Ambas as opções são
  • desligado: se o carrossel estiver girando automaticamente.
  • educado: se o carrossel NÃO estiver girando automaticamente.

ARIA support

Componente carrossel

Attributes:

• aria-roledescription definido como 'carrossel'.
• aria-selected- definido como verdadeiro ou falso com base no slide ativo.
• aria-controls- define um índice de slide cujo conteúdo é controlado pelo elemento atual.
• aria-live- usado para definir a prioridade com a qual o leitor de tela deve tratar atualizações para regiões ativas - as configurações possíveis são: off e polite. A configuração padrão é polite. Quando a opção interval é definida, o atributo aria-live seria definido como off.
• slide baseado em rótulo de ária.
• aria-label (botões)
  • aria-label - para slide anterior.
  • aria-label - para o próximo slide.

Componente de slide

Roles:

• attr.role="tabpanel"- contêiner para os recursos associados a uma guia, onde cada guia está contida em uma tablist.

Attributes:

• id - segue o padrão "panel-${this.index}"
• aria-labelledby segue o padrão "tab-${this.index}-${this.total}"
• aria-selected define slide ativo. Indica o estado selecionado atual de um elemento de slide específico.

API References

• Componente IgxCarousel
• Estilos de componentes do carrossel Igx
• Componente IgxSlide
• Componente de lista Igx
• Componente IgxListItem

Theming Dependencies

• Tema IgxIcon

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub