Blazor Carousel Overview

El carrusel de Ignite UI for Blazor 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 Blazor le permite usar animaciones, transiciones de diapositivas y personalización para que pueda ajustar fácilmente la interfaz y crear Blazor carrusel personalizado.

Blazor Carousel Example

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

Usage

Antes de usarlosIgbCarousel, debes registrarlo de la siguiente manera:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));

También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbCarousel componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

Ahora que tienes importado el Ignite UI for Blazor Carusel, puedes empezar con una configuración básica de lasIgbCarousel y sus slides.

Usa elIgbCarousel selector para envolver tus slides. Las diapositivas pueden contener cualquier contenido html válido en su interior, incluidos otros componentes.

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

Si quieres que una diapositiva esté activa por defecto, usa elActive atributo:

<IgbCarousel>
    ...
    <IgbCarouselSlide>
        ...
    </IgbCarouselSlide>
    <IgbCarouselSlide Active="true">
        ...
    </IgbCarouselSlide>
</IgbCarousel>

[!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 defecto, tieneIgbCarousel suDisableLoop 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 laDisableLoop propiedad en verdadero.

<IgbCarousel DisableLoop="true">
    ...
</IgbCarousel>

Para llevar un seguimiento de cada índice de diapositiva, el carrusel tiene indicadores que se colocan por defecto en laend parte inferior del carrusel. Para cambiar este comportamiento, usa laIndicatorsOrientation propiedad y asigna astart ella.

<IgbCarousel IndicatorsOrientation="@CarouselIndicatorsOrientation.Start">
    ...
</IgbCarousel>

Por defecto, muestraIgbCarousel sus botones de navegación e indicadores. Usa laHideIndicators propiedad para ocultar los indicadores y laHideNavigation propiedad para ocultar los botones de navegación.

<IgbCarousel HideNavigation="true" HideIndicators="true">
    ...
</IgbCarousel>

SoportaIgbCarousel el modo vertical. Utiliza laVertical propiedad para habilitarlo.

<IgbCarousel Vertical="true">
    ...
</IgbCarousel>

Custom indicators

Para añadir Blazor indicadores personalizados para carrusel, utiliza elIgbCarouselIndicator:

<IgbCarousel>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg" alt="the_red_ice_forest" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/card/media/yosemite.jpg" alt="yosemite" />
    </IgbCarouselSlide>
</IgbCarousel>

El componente Carrusel Ignite UI for Blazor 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.

Para lograrlo, utiliza lasprevious-button ranuras ynext-button:

<IgbCarousel>
    <IgbIcon slot="previous-button" IconName="previous" Collection="material"></IgbIcon>
    <IgbIcon slot="next-button" IconName="next" Collection="material"></IgbIcon>
    ...
</IgbCarousel>

Slide containing other components

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

<IgbCarousel>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Username">
                    <IgbIcon slot="prefix" IconName="person" Collection="material" @ref="iconRef"></IgbIcon>
                </IgbInput>
                <IgbInput DisplayType="@InputType.Password" Placeholder="Password">
                    <IgbIcon slot="prefix" IconName="password" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Sign In</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Search">
                    <IgbIcon slot="prefix" IconName="search" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Search</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
</IgbCarousel>

Manifestación

Animations

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

El carrusel está configurado para usar laslide animación por defecto, pero también lo soportafade como animación alternativa.

Usa laAnimationType propiedad para cambiar la animación.

<IgbCarousel AnimationType="@CarouselAnimationType.Fade">
    ...
</IgbCarousel>

Configurarnone laAnimationType propiedad desactiva las animaciones.

Manifestación

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

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.

Touch gestures

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

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

Automatic transitioning

SeIgbCarousel pueden configurar fácilmente para cambiar las diapositivas automáticamente, sin ninguna interacción del usuario. De esta manera puedes crear tu propia presentación de diapositivas estableciendo solo un intervalo de transición para laInterval propiedad, que determina el tiempo en milisegundos entre la transición de la diapositiva.

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

<IgbCarousel Interval="2000" DisablePauseOnInteraction="true">
    ...
</IgbCarousel>

Advanced Example

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 laDisablePauseOnInteraction propiedad
Habilitar laHideNavigation propiedad
Habilitar laVertical propiedad
Añadir transiciónInterval
Añadir personalizadoIgbCarouselIndicator para cada diapositiva

Nuestro carrusel se verá así en la plantilla:

<IgbCarousel DisablePauseOnInteraction="true"
             HideNavigation="true"
             Interval="2000"
             Vertical="true"
             AnimationType="@CarouselAnimationType.Fade">
    <IgbCarouselIndicator>
        <img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60" />
        <img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60" />
        <img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60" />
        <img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60" />
        <img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60" />
        <img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60" />
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/carousel/WonderfulCoast.png" alt="WonderfulCoast" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/CulturalDip.png" alt="CulturalDip" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/GoldenBeaches.png" alt="GoldenBeaches" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/IslandOfHistory.png" alt="IslandOfHistory" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/AmazingBridge.png" alt="AmazingBridge" />
    </IgbCarouselSlide>
</IgbCarousel>

Estas configuraciones tendrán el siguiente resultado:

Accessibility

WAI-ARIA Roles, States, and Properties

El rol de elemento base Carousel esregion una sección que contiene contenido relevante para un propósito específico y que los usuarios probablemente querrán poder navegar fácilmente.
Los indicadores de carrusel tienen una etiqueta de agrupación de rolestab que proporciona un mecanismo para seleccionar el contenido de la pestaña que se va a mostrar al usuario
El elemento que sirve como contenedor para el conjunto de pestañas (indicadores de carrusel) es con roltablist.
Cada elemento de la diapositiva está asignado por su funcióntabpanel.

ARIA support

Componente de carrusel

Attributes
- aria-roledescription establecido en "carrusel".
- Aria-Live- Se usa para establecer la prioridad con qué lector de pantalla debe tratar las actualizaciones de las regiones en vivo; los ajustes posibles son: Apagado y Educado. La configuración predeterminada es educada y se asigna al elemento que sirve como contenedor para el conjunto de diapositivas. Cuando laInterval opción está activada y el carrusel está en estado de reproducción, el atributo aria-live se pondría en desactivado.
- 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.

Blazor Carousel Overview

Blazor Carousel Example

Usage

Examples

Carousel Configuration

Custom indicators

Custom navigation buttons

Slide containing other components

Manifestación

Animations

Manifestación

Navigation

Touch gestures

Navegación por teclado

Automatic transitioning

Advanced Example

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Componente de carrusel

Slide component

Indicator component

API References

Additional Resources