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ê precisará importar o IgrCarousel CSS necessário e registrar seu módulo, assim:

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

IgrCarouselModule.register();

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

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

Use o IgrCarousel seletor para quebrar seus slides. Os slides podem apresentar qualquer conteúdo html válido, incluindo outros componentes.

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

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

<IgrCarousel>
    ...
    <IgrCarouselSlide key="first">
        ...
    </IgrCarouselSlide>
    <IgrCarouselSlide active={true} key="second">
        ...
    </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, o IgrCarousel tem sua disableLoop propriedade definida como false (o loop ocorre quando o primeiro slide vem depois do último navegando usando a ação Avançar, ou quando o último slide vem depois do primeiro usando a ação Anterior). O comportamento de loop pode ser desabilitado definindo o disableLoop valor da propriedade como true.

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

Para acompanhar cada índice de slide, o carrossel tem indicadores posicionados no end carrossel por padrão. Para alterar esse comportamento, use a indicatorsOrientation propriedade e atribua-a a start.

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

Por padrão, o exibe IgrCarousel seus botões e indicadores de navegação. Use a hideIndicators propriedade para ocultar os indicadores e a hideNavigation propriedade para ocultar os botões de navegação.

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

O IgrCarousel modo vertical de suporte. Use a vertical propriedade para habilitá-la.

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

Custom indicators

To add React custom carousel indicators, use the IgrCarouselIndicator:

<IgrCarousel>
    <IgrCarouselIndicator key="first-indicator">
        <span key="empty">🤍</span>
        <span slot="active" key="active">❤️</span>
    </IgrCarouselIndicator>
    <IgrCarouselIndicator key="second-indicator">
        <span key="empty">🤍</span>
        <span slot="active" key="active">❤️</span>
    </IgrCarouselIndicator>

    <IgrCarouselSlide key="first">
        <img src="assets/images/card/media/the_red_ice_forest.jpg" key="img"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="second">
        <img src="assets/images/card/media/yosemite.jpg" key="img"/>
    </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 conseguir isso, use os previous-button slots e next-button:

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

Slide containing other components

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

<IgrCarousel>
    <IgrCarouselSlide key="slide-1">
        <div key="slide-content">
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <IgrInput type="text" placeholder="Username">
                    <IgrIcon slot="prefix" name="person" key="icon"></IgrIcon>
                </IgrInput>
                <IgrInput type="password" placeholder="Password">
                    <IgrIcon slot="prefix" name="password" key="icon"></IgrIcon>
                </IgrInput>
                <IgrButton type="reset">
                    <span key="button-span">Sign In</span>
                </IgrButton>
            </form>
        </div>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="slide-2">
        <div key="slide-content">
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <IgrInput type="text" placeholder="Search">
                    <IgrIcon slot="prefix" name="search" key="icon"></IgrIcon>
                </IgrInput>
                <IgrButton type="reset">
                    <span key="button-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 a slide animação por padrão, mas também dá suporte fade como uma animação alternativa.

Use the animationType property to change the animation.

<IgrCarousel animationType={CarouselAnimationType.Fade}>
    ...
</IgrCarousel>

Setting none to the animationType property disables the animations.

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
  • 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

Eles IgrCarousel 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 a propriedade, que determina a quantidade de tempo em milissegundos entre a interval transição dos slides.

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

• Habilite a disablePauseOnInteraction propriedade
• enable the hideNavigation property
• Habilite a vertical propriedade
• add transition interval
• add custom IgrCarouselIndicator for each 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={CarouselAnimationType.Fade}
>
    {images.map((image, index) => {
        return (
            <React.Fragment key={index}>
                <IgrCarouselSlide key={`slide-${index}`}>
                    <img src={image.src} alt={image.alt} key="slide-img" />
                </IgrCarouselSlide>
                <IgrCarouselIndicator key={`indicator-${index}`}>
                    <img
                        key="img-blur"
                        className="blurred"
                        src={image.src.replace(".png", "Thumb.png")}
                        alt={`${image.alt} Thumb`}
                        width="50"
                        height="60"
                    />
                    <img
                        key="img-active"
                        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

• 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 o conjunto de guias (indicadores de carrossel) é com função tablist.
• Cada elemento do slide é definido com a função tabpanel.

ARIA support

componente carrossel

• Attributes
  • aria-roledescription definido como "carrossel".
  • aria-live- usado para definir a prioridade com a qual o leitor de tela deve tratar as atualizações para regiões ativas - as configurações possíveis são: off e polite. A configuração padrão é educada e é definida como o elemento que serve como contêiner para o conjunto de slides. Quando a interval opção é definida e o carrossel está em estado de reprodução, o atributo aria-live seria definido como desativado.
  • 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