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

Before using the IgbCarousel, you need to register it as follows:

// in Program.cs file

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

You will also need to link an additional CSS file to apply the styling to the IgbCarousel component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

Now that you have the Ignite UI for Blazor Carousel imported, you can start with a basic configuration of the IgbCarousel and its slides.

Use the IgbCarousel selector to wrap your slides. The slides may feature any valid html content inside, including other components.

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

If you want a slide to be active by default, use the Active attribute:

<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

By default, the IgbCarousel has its DisableLoop property set to false (looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action). The looping behavior can be disabled by setting the value of the DisableLoop property to true.

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

To keep track of each slide index, the carousel has indicators that are positioned at the end of the carousel by default. In order to change this behavior, use the IndicatorsOrientation property and assign it to start.

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

By default, the IgbCarousel displays its navigation buttons and indicators. Use the HideIndicators property to hide the indicators and the HideNavigation property to hide the navigation buttons.

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

The IgbCarousel supports vertical mode. Use the Vertical property to enable it.

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

Custom indicators

To add Blazor custom carousel indicators, use the IgbCarouselIndicator:

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

To achieve this, use the previous-button and next-button slots:

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

The carousel is configured to use the slide animation by default, but it also supports fade as an alternative animation.

Use the AnimationType property to change the animation.

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

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.

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

The IgbCarousel can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the Interval property, which determines the amount of time in milliseconds between slides transition.

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

enable the DisablePauseOnInteraction property
enable the HideNavigation property
enable the Vertical property
add transition Interval
add custom IgbCarouselIndicator for each slide

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

The Carousel base element role is region - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily.
Carousel indicators are with role tab - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user
The element that serves as the container for the set of tabs (carousel indicators) is with role tablist.
Each slide element is set with role tabpanel.

ARIA support

Componente de carrusel

Attributes
- aria-roledescription establecido en "carrusel".
- aria-live - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off and polite. The default setting is polite and is set to the element that serves as the container for the set of slides. When the Interval option is set and the carousel is in playing state, the aria-live attribute would be set to 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.

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