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 oHammerModule opcionalmente. Ele pode ser importado no módulo raiz da aplicação para que as interações por toque funcionem como 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 {}

Alternativamente,16.0.0 você pode importarIgxCarouselComponent como uma dependência independente ou usar oIGX_CAROUSEL_DIRECTIVES token 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 ou diretivas do Ignite UI for Angular Caroussel, pode começar a usar oigx-carousel componente.

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 carrossel em Angular tem sualoop propriedade de entrada configurada paratrue (looping 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 Anterior). O comportamento de looping pode ser desativado definindo o valor daloop entrada parafalse.

<igx-carousel [loop]="false">
    ...
</igx-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.

<igx-carousel indicatorsOrientation="start">
    ...
</igx-carousel>

Por padrão, eleIgxCarousel exibe seus botões de navegação e indicadores. Use aindicators propriedade para esconder os indicadores e anavigation propriedade para ocultar os botões de navegação.

<igx-carousel [navigation]="false" [indicators]="false">
    ...
</igx-carousel>

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

<igx-carousel [vertical]="true">
    ...
</igx-carousel>

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 aslide animação por padrão, mas também suportafade como animação alternativa.

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

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

Configurarnone para oanimationType input desativa as animações do carrossel.

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 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 com toque ativo. Isso é opcional e pode ser alterado definindo a propriedade gesturesSupport parafalse.

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/Enter key - navega para o próximo/slide anterior.
Indicadores
- Arrow Leftchave - navega até o slide anterior (próximo no modo da direita para a esquerda).
- Arrow Rightchave - navega para o próximo slide (anterior no modo da direita para a esquerda).
- Homechave - navega até o primeiro slide (último no modo da direita para a esquerda).
- Endchave - navega até 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 do slide não é totalmente independente do usuário por padrão. Posicionar o ponteiro do mouse sobre um slide interrompe a transição atual do slide até que o ponteiro do mouse saia da área do slide. Isso pode ser evitado definindo a propriedade de pausa para.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:

DesabilitargesturesSupport
Desative osnavigation botões
Desative o carrosselindicators
Desative apause interação do usuário com o slide
adicionar transiçãointerval

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 no carrosselslideChanged e no item da listaEventos clicados:

Note

A partir da versão 15.1.0onSlideChanged, foi renomeada paraslideChanged. Usarng update automaticamente migrará seu código antes de usar o novo nome do 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:

Angular Carousel Styling

Carousel Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Material Fluente Bootstrap Anil

Propriedade primária	Propriedade dependente	Descrição
$button-fundo	$button fundo do mouse	A cor de fundo do botão ao passar o mouse.
	$button cor da seta	A cor da seta do botão.
	$button-disabled-background	A cor de fundo do botão quando desativado.
	$indicator foco de cor (Quando $indicator plano de fundo não é fornecido)	A cor do indicador quando focado.
$button fundo do mouse	$button - hover-arrow-color	A cor da seta do botão ao passar o mouse.
$button-disabled-background	$button-desabilitado-seta-cor	A cor da seta do botão quando desabilitada.
$button - hover-arrow-color	$button-foco-seta-cor	A cor da seta do botão quando focado.
$button-foco-seta-cor	$button cor da borda de foco	A cor da borda do botão quando focado.
$indicator-fundo	$indicator cor da borda	A cor da borda do indicador.
	$indicator-ativo-ponto-cor	A cor do ponto indicador quando ativo.
	$indicator foco de cor	A cor do indicador quando focado.
$indicator-ativo-ponto-cor	$indicator-ativo-hover-ponto-cor	A cor do indicador quando ativo e pairado.
	$indicator-active-border-color	A cor da borda do indicador quando ativa.
$indicator pontos de cor	$indicator hover-ponto-cor	A cor do ponto indicador ao passar o mouse.

Propriedade primária	Propriedade dependente	Descrição
$button-fundo	$button fundo do mouse	A cor de fundo do botão ao passar o mouse.
	$button cor da seta	A cor da seta do botão.
	$button-disabled-background	A cor de fundo do botão quando desativado.
	$button cor da borda de foco	A cor da borda do botão quando focado.
	$indicator foco de cor (Quando $indicator plano de fundo não é fornecido)	A cor do indicador quando focado.
$button fundo do mouse	$button - hover-arrow-color	A cor da seta do botão ao passar o mouse.
$button-disabled-background	$button-desabilitado-seta-cor	A cor da seta do botão quando desabilitada.
$button - hover-arrow-color	$button-foco-seta-cor	A cor da seta do botão quando focado.
$indicator-fundo	$indicator cor da borda	A cor da borda do indicador.
	$indicator-ativo-ponto-cor	A cor do ponto indicador quando ativo.
	$indicator foco de cor	A cor do indicador quando focado.
$indicator-ativo-ponto-cor	$indicator-ativo-hover-ponto-cor	A cor do indicador quando ativo e pairado.
	$indicator-active-border-color	A cor da borda do indicador quando ativa.
$indicator pontos de cor	$indicator hover-ponto-cor	A cor do ponto indicador ao passar o mouse.

Propriedade primária	Propriedade dependente	Descrição
$button-fundo	$button fundo do mouse	A cor de fundo do botão ao passar o mouse.
	$button cor da seta	A cor da seta do botão.
	$button-disabled-background	A cor de fundo do botão quando desativado.
	$button cor da borda de foco	A cor da borda do botão quando focado.
	$indicator foco de cor (Quando $indicator plano de fundo não é fornecido)	A cor do indicador quando focado.
$button fundo do mouse	$button - hover-arrow-color	A cor da seta do botão ao passar o mouse.
$button-disabled-background	$button-desabilitado-seta-cor	A cor da seta do botão quando desabilitada.
$button - hover-arrow-color	$button-foco-seta-cor	A cor da seta do botão quando focado.
$indicator-fundo	$indicator cor da borda	A cor da borda do indicador.
	$indicator-ativo-ponto-cor	A cor do ponto indicador quando ativo.
	$indicator foco de cor	A cor do indicador quando focado.
$indicator-ativo-ponto-cor	$indicator-ativo-hover-ponto-cor	A cor do indicador quando ativo e pairado.
	$indicator-active-border-color	A cor da borda do indicador quando ativa.
$indicator pontos de cor	$indicator hover-ponto-cor	A cor do ponto indicador ao passar o mouse.

Propriedade primária	Propriedade dependente	Descrição
$button-fundo	$button fundo do mouse	A cor de fundo do botão ao passar o mouse.
	$button cor da borda	A cor da borda do botão.
	$button cor da seta	A cor da seta do botão.
	$button-disabled-background	A cor de fundo do botão quando desativado.
	$indicator-ativo-ponto-cor (Quando $indicator plano de fundo não é fornecido)	A cor do ponto indicador quando ativo.
$button fundo do mouse	$button - hover-arrow-color	A cor da seta do botão ao passar o mouse.
$button-disabled-background	$button-desabilitado-seta-cor	A cor da seta do botão quando desabilitada.
$button cor da borda	$button cor da borda do mouse	A cor da borda do botão ao passar o mouse.
$button - hover-arrow-color	$button-foco-seta-cor	A cor da seta do botão quando focado.
$indicator-fundo	$indicator pontos de cor	A cor do ponto indicador.
	$indicator-ativo-ponto-cor	A cor do ponto indicador quando ativo.
$indicator pontos de cor	$indicator hover-ponto-cor	A cor do ponto indicador ao passar o mouse.
	$indicator cor da borda	A cor da borda do indicador.
$indicator-ativo-ponto-cor	$indicator-ativo-hover-ponto-cor	A cor do indicador quando ativo e pairado.
	$indicator-active-border-color	A cor da borda do indicador quando ativa.
	$button cor da borda de foco	A cor da borda do botão quando focado.
$indicator-ativo-hover-ponto-cor	$indicator foco de cor	A cor do indicador quando focado.

Usando a Ignite UI for Angular Tema, podemos alterar muito acarousel aparência.

Primeiro, para usar as funções expostas pelo motor de temas, precisamos importar oindex arquivo do nosso arquivo de estilo:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende o tema do carrossel e, ao fornecer apenas alguns parâmetros base, como$button-background e,$indicator-background o tema gerará as cores específicas de cada estado e os primeiros planos contrastantes apropriados. Você também pode sobrescrever qualquer um dos parâmetros disponíveis se quiser mais controle sobre a aparência.

$carousel-theme: carousel-theme(
  $button-background: #7c32dd,
  $indicator-background: #7c32dd,
);

A última etapa é incluir o tema do componente.

@include css-vars($carousel-theme);

Demo

O exemplo abaixo demonstra um estilo simples aplicado por meio da Ignite UI for Angular.

Styling with Tailwind

Você pode usarcarousel nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-carousel,dark-carousel.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema carrossel. A sintaxe é a seguinte:

<igx-carousel class="!light-carousel
![--indicator-background:#a7b6de] 
![--button-background:#a7b6de] 
![--indicator-border-color:#3E4853]">
  ...
</igx-carousel>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, seu carrossel deve ficar assim:

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) é definido paratablist.
Cada elemento do slide é definido com seu papeltabpanel.
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

Papéis

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.

Visão geral do componente Angular Carousel

Angular Carousel Example

Getting Started with Ignite UI for Angular Carousel

Note

Using the Angular Carousel Component

Adding slides with *ngFor

Angular Carousel Custom Examples

Configuring IgxCarousel

Custom indicators

Custom nav buttons

Slide containing other components

Demo

Angular Carousel Animations

Demo

Navigation

Pan gestures

Navegação pelo teclado

Automatic transitioning

Note

Advanced Example

Note

Angular Carousel Styling

Carousel Theme Property Map

Demo

Styling with Tailwind

Note

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Componente carrossel

Attributes

Componente de slide

Papéis

Attributes

API References

Theming Dependencies

Additional Resources

Temas