Visão geral do carrossel React

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

React Carousel Example

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

Usage

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

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

import { IgrCarousel, IgrCarouselSlide } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

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

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

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

<IgrCarousel>
    ...
    <IgrCarouselSlide>
        ...
    </IgrCarouselSlide>
    <IgrCarouselSlide active={true}>
        ...
    </IgrCarouselSlide>
</IgrCarousel>

[!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, aIgrCarousel 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.

<IgrCarousel disableLoop={true}>
    ...
</IgrCarousel>

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.

<IgrCarousel indicatorsOrientation={CarouselIndicatorsOrientation.Start}>
    ...
</IgrCarousel>

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

<IgrCarousel hideNavigation={true} hideIndicators={true}>
    ...
</IgrCarousel>

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

<IgrCarousel vertical={true}>
    ...
</IgrCarousel>

Custom indicators

Para adicionar React indicadores personalizados para carrossel, utilize oIgrCarouselIndicator:

<IgrCarousel>
  <IgrCarouselIndicator>
    <span key="empty">🤍</span>
    <span slot="active">
      ❤️
    </span>
  </IgrCarouselIndicator>
  <IgrCarouselIndicator>
    <span key="empty">🤍</span>
    <span slot="active">
      ❤️
    </span>
  </IgrCarouselIndicator
  <IgrCarouselSlide>
    <img
      src="https://pt-br.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"
    />
  </IgrCarouselSlide>
  <IgrCarouselSlide key="second">
    <img src="https://pt-br.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
  </IgrCarouselSlide>
</IgrCarousel>

O componente Ignite UI for React 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​

<IgrCarousel>
    <IgrIcon slot="previous-button" name="previous" collection="material"></IgrIcon>
    <IgrIcon slot="next-button" name="next" collection="material"></IgrIcon>
    ...
</IgrCarousel>

Slide containing other components

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

<IgrCarousel>
    <IgrCarouselSlide>
      <div>
        <img src="assets/images/svg/carousel/SignUp.svg" />
        <form>
          <IgrInput type="text" placeholder="Username">
            <IgrIcon slot="prefix" name="person"></IgrIcon>
          </IgrInput>
          <IgrInput type="password" placeholder="Password">
            <IgrIcon slot="prefix" name="password"></IgrIcon>
          </IgrInput>
          <IgrButton type="reset">
            <span>Sign In</span>
          </IgrButton>
        </form>
      </div>
    </IgrCarouselSlide>
    <IgrCarouselSlide>
      <div>
        <img src="assets/images/svg/carousel/Route.svg" />
        <form>
          <IgrInput type="text" placeholder="Search">
            <IgrIcon slot="prefix" name="search"></IgrIcon>
          </IgrInput>
          <IgrButton type="reset">
            <span>Search</span>
          </IgrButton>
        </form>
      </div>
    </IgrCarouselSlide>
</IgrCarousel>

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.

<IgrCarousel animationType="fade">
    ...
</IgrCarousel>

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

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

<IgrCarousel interval={2000} disablePauseOnInteraction={true}>
    ...
</IgrCarousel>

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

Nosso carrossel ficará assim no modelo:

const images = [
    {
        src: "assets/images/carousel/WonderfulCoast.png",
        alt: "Wonderful Coast",
    },
    {
        src: "assets/images/carousel/CulturalDip.png",
        alt: "Cultural Dip",
    },
    {
        src: "assets/images/carousel/GoldenBeaches.png",
        alt: "Golden Beaches",
    },
    {
        src: "assets/images/carousel/IslandOfHistory.png",
        alt: "Island Of History",
    },
    {
        src: "assets/images/carousel/AmazingBridge.png",
        alt: "Amazing Bridge",
    },
];

<IgrCarousel
  disablePauseOnInteraction={true}
  hideNavigation={true}
  interval={2000}
  vertical={true}
  animationType="fade"
>
  {images.map((image, index) => {
    return (
      <React.Fragment key={index}>
        <IgrCarouselSlide>
          <img src={image.src} alt={image.alt} />
        </IgrCarouselSlide>
        <IgrCarouselIndicator>
          <img
            className="blurred"
            src={image.src.replace(".png", "Thumb.png")}
            alt={`${image.alt} Thumb`}
            width="50"
            height="60"
          />
          <img
            slot="active"
            src={image.src.replace(".png", "Thumb.png")}
            alt={`${image.alt} Thumb Active`}
            width="50"
            height="60"
          />
        </IgrCarouselIndicator>
      </React.Fragment>
    );
  })}
</IgrCarousel>

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

• IgrCarousel
• IgrCarouselSlide
• IgrCarouselIndicator
• IgrIcon
• IgrInput
• IgrButton

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub