Descripción general del carrusel de React

El carrusel de Ignite UI for React es un componente ligero y con capacidad de respuesta que proporciona la forma más flexible de crear una experiencia web similar a una presentación de diapositivas para los usuarios que navegan hacia adelante y hacia atrás a través de una colección de imágenes con diapositivas de texto, enlaces y otros elementos html.

El componente Carrusel React le permite usar animaciones, transiciones de diapositivas y personalización para que pueda ajustar fácilmente la interfaz y crear React carrusel personalizado.

React Carousel Example

La demostración de React Carousel que ve a continuación muestra diapositivas que contienen solo imágenes.

Uso

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react

A continuación, tendrás que importar el IgrCarousel CSS necesario y registrar su módulo, de la siguiente manera:

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

Para una introducción completa al Ignite UI for React, lee el tema Empezar.

Ahora que tiene el carrusel de Ignite UI for React importado, puede comenzar con una configuración básica del IgrCarousel y sus diapositivas.

Usa el IgrCarousel selector para envolver tus diapositivas. Las diapositivas pueden contener cualquier contenido html válido, incluidos otros 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>

Si desea que una diapositiva esté activa de forma predeterminada, utilice el Active atributo:

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

[! NOTA] Si no hay ningún deslizamiento activo, el primero se configurará por defecto. Si hay varias diapositivas activas en el renderizado inicial o en actualizaciones posteriores, solo se tendrá en cuenta la última.

Ejemplos

Carousel Configuration

Por defecto, tiene IgrCarousel su disableLoop propiedad configurada como falso (el bucle ocurre cuando la primera diapositiva viene después de la anterior navegando usando la acción Siguiente, o cuando la última diapositiva viene después de la primera usando la acción Anterior). El comportamiento de bucle puede desactivarse estableciendo el valor de la disableLoop propiedad en verdadero.

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

Para realizar un seguimiento de cada índice de diapositivas, el carrusel tiene indicadores que se colocan en el end carrusel de forma predeterminada. Para cambiar este comportamiento, use la indicatorsOrientation propiedad y asígnela a start.

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

De forma predeterminada, muestra IgrCarousel sus botones de navegación e indicadores. Utilice la hideIndicators propiedad para ocultar los indicadores y la hideNavigation propiedad para ocultar los botones de navegación.

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

Admite IgrCarousel el modo vertical. Utilice la vertical propiedad para habilitarlo.

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

Indicadores personalizados

To add React custom carousel indicators, use the IgrCarouselIndicator:

<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://es.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"
    />
  </IgrCarouselSlide>
  <IgrCarouselSlide key="second">
    <img src="https://es.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
  </IgrCarouselSlide>
</IgrCarousel>

El componente Carrusel Ignite UI for React permite a los usuarios utilizar diferentes elementos para el estado activo e inactivo de un solo indicador. Es obligatorio proporcionar dos elementos para cada ranura (vacío y activo) al declarar un indicador, incluso si son los mismos.

Custom navigation buttons

Para lograr esto, use las previous-button ranuras y next-button:

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

Diapositiva que contiene otros componentes.

Este carrusel contendrá diapositivas con formularios e imágenes:

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

Manifestación

animaciones

Las transiciones de diapositivas animadas brindan a los usuarios finales una experiencia agradable al interactuar con el carrusel.

El carrusel está configurado para usar la slide animación de forma predeterminada, pero también admite fade como animación alternativa.

Use the animationType property to change the animation.

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

Setting none to the animationType property disables the animations.

Manifestación

La siguiente demostración muestra los diferentes tipos de animaciones que admite el carrusel.

Navegación

La transición y la navegación son las características más importantes del carrusel.

La navegación en el carrusel puede ser manejada por el usuario a través de botones de navegación, indicadores, navegación con el teclado e interacción táctil en dispositivos móviles.

Gestos táctiles

De forma predeterminada, el carrusel se puede usar en cualquier dispositivo táctil.

Las animaciones del carrusel son totalmente compatibles con dispositivos táctiles, lo que hace que el carrusel sea consistente con cualquier plataforma y excelente cuando se usa en aplicaciones web progresivas (PWA).

Navegación por teclado

• Botones de navegación
  • SPACE o ENTER clave: navega a la diapositiva siguiente/anterior.
• Indicadores
  • 🡐 key: navega a la diapositiva anterior (siguiente en modo de derecha a izquierda).
  • 🡒- navega a la siguiente diapositiva (anterior en modo de derecha a izquierda).
  • HOME key: navega a la primera diapositiva (última en modo de derecha a izquierda).
  • END key: navega hasta la última diapositiva (la primera en el modo de derecha a izquierda).

Transición automática

Se IgrCarousel puede configurar fácilmente para cambiar las diapositivas automáticamente, sin ninguna interacción del usuario. De esta manera, puede crear su propia presentación de diapositivas estableciendo solo un intervalo de transición en la interval propiedad, que determina la cantidad de tiempo en milisegundos entre la transición de las diapositivas.

[! NOTA] Pasar el ratón sobre cualquier contenido del carrusel o mover el enfoque del teclado a cualquiera de los contenidos del carrusel pausa la transición automática. La transición automática se reanuda cuando el ratón se aleja del carrusel o cuando el enfoque del teclado sale del contenido del carrusel. Esto se puede evitar estableciendo disablePauseOnInteraction la propiedad como verdadera.

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

Ejemplo avanzado

Vamos a crear un carrusel totalmente automatizado con el bucle activado. Configuraremos los indicadores para que sean una representación en miniatura de cada diapositiva.

Para lograr este objetivo, tenemos que realizar las siguientes configuraciones al carrusel:

• Habilitar la disablePauseOnInteraction propiedad
• enable the hideNavigation property
• Habilitar la vertical propiedad
• add transition interval
• add custom IgrCarouselIndicator for each slide

Nuestro carrusel se verá así en la plantilla:

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>

Estas configuraciones tendrán el siguiente resultado:

Accesibilidad

Funciones, estados y propiedades de WAI-ARIA

• La función del elemento base del carrusel es region: sección que contiene contenido relevante para un propósito específico y los usuarios probablemente querrán poder navegar fácilmente.
• Los indicadores del carrusel tienen tab de función: una etiqueta de agrupación que proporciona un mecanismo para seleccionar el contenido de la pestaña que se presentará al usuario.
• El elemento que sirve como contenedor para el conjunto de pestañas (indicadores de carrusel) es con rol tablist.
• Cada elemento de diapositiva está configurado con tabpanel de función.

Soporte ARIA

Componente de carrusel

• Attributes
  • aria-roledescription establecido en "carrusel".
  • aria-live: se utiliza para establecer la prioridad con la que el lector de pantalla debe tratar las actualizaciones a las regiones en vivo: las configuraciones posibles son: desactivado y cortés. La configuración predeterminada es cortés y se establece en el elemento que sirve como contenedor para el conjunto de diapositivas. Cuando se establece la interval opción y el carrusel está en estado de reproducción, el atributo aria-live se establecería en off.
  • aria-label (navigation buttons) - "Previous slide"/"Next slide".

Slide component

• Attributes
  • id - sigue el patrón "igc-carousel-slide-${incremented_number}".
  • aria-roledescription establecido en "slide".
  • aria-label sigue el patrón "${index + 1} of ${total}".

Indicator component

• Attributes
  • aria-label sigue el patrón "Slide ${index + 1}"
  • Aria-Selected se establece en verdadero o falso en función de la diapositiva activa.

Referencias de API

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

Recursos adicionales

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