Descripción general del componente Carrusel Angular

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

Angular Carousel Example

La demostración de Angular Carousel que se ve a continuación muestra diapositivas que contienen solo imágenes. Hemos habilitado botones de navegación que permiten a los usuarios pasar fácilmente de una diapositiva a otra, yendo hacia adelante y hacia atrás.

Getting Started with Ignite UI for Angular Carousel

Para comenzar con el componente Ignite UI for Angular Carrusel, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxCarouselModule en nuestro archivo app.module.ts:

Note

Este componente puede utilizar el HammerModule opcionalmente. Se puede importar en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., HammerModule, IgxCarouselModule],
    ...
})
export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxCarouselComponent como una dependencia independiente o usar el token IGX_CAROUSEL_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}

Ahora que tiene el módulo o las directivas Ignite UI for Angular Carrusel importados, puede comenzar a usar el igx-carousel componente.

Using the Angular Carousel Component

El componente Carrusel Ignite UI for Angular se puede utilizar como un elemento de pantalla completa o situado dentro de otro componente. Además, las diapositivas pueden incluir cualquier contenido html válido en su interior, incluidos otros componentes Angular.

En esta sección repasaremos la configuración de la demostración definida anteriormente.

Adding slides with *ngFor

Si tenemos diapositivas con el mismo tipo de contenido, el enfoque más sencillo es usar *ngFor para agregarlas en la plantilla.

Dado que nuestras diapositivas solo contendrán imágenes, crearemos una serie de objetos en el archivo ts y los usaremos para llenar el carrusel igx con diapositivas:

@Component({...})
export class HomeComponent {
    public slides = [
        { src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' },
        { src: '/assets/images/carousel/slider-image-chart.png' },
        { src: '/assets/images/carousel/ignite-ui-angular-charts.png' }
    ];
}

<div class="carousel-container">
    <igx-carousel #carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
</div>

Angular Carousel Custom Examples

Configuring IgxCarousel

De forma predeterminada, el carrusel de Angular tiene su loop propiedad de entrada establecida true en (el bucle se produce cuando la primera diapositiva viene después de la última navegando mediante la acción Siguiente, o cuando la última diapositiva viene después de la primera mediante la acción Anterior). El comportamiento de bucle se puede desactivar estableciendo el valor de la loop entrada en false.

<igx-carousel [loop]="false">
    ...
</igx-carousel>

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.

<igx-carousel indicatorsOrientation="start">
    ...
</igx-carousel>

De forma predeterminada, muestra IgxCarousel sus botones de navegación e indicadores. Utilice la indicators propiedad para ocultar los indicadores y la navigation propiedad para ocultar los botones de navegación.

<igx-carousel [navigation]="false" [indicators]="false">
    ...
</igx-carousel>

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

<igx-carousel [vertical]="true">
    ...
</igx-carousel>

Custom indicators

Para agregar Angular indicadores de carrusel personalizados tendremos que usar la IgxCarouselIndicatorDirective, así:

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

Custom nav buttons

Para lograr esto usaremos las directivas IgxCarouselPrevButtonDirective e IgxCarouselNextButtonDirective:

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

Slide containing other components

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

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

Manifestación

Angular Carousel 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 la animación slide de forma predeterminada, pero también admite fade como animación alternativa.

Las animaciones se configuran a través de la entrada AnimationType, así:

<igx-carousel animationType="fade">
...
</igx-carousel>

Establecer none en la entrada animationType deshabilita las animaciones del carrusel.

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, navegación con teclado e interacción panorámica en dispositivos móviles.

Pan gestures

De forma predeterminada, el carrusel se puede utilizar en cualquier dispositivo táctil. Esto es opcional y se puede cambiar estableciendo la propiedad gestosSupport en false.

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 / Enter key: navega a la diapositiva siguiente/anterior.
Indicadores
- Arrow Left tecla: navega a la diapositiva anterior (siguiente en el modo de derecha a izquierda).
- Arrow Right key: navega a la siguiente diapositiva (anterior en el modo de derecha a izquierda).
- Home key: navega a la primera diapositiva (la última en el modo de derecha a izquierda).
- End key: navega hasta la última diapositiva (la primera en el modo de derecha a izquierda).

Automatic transitioning

El IgxCarousel se 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 únicamente un intervalo de transición en la propiedad de intervalo, que determina la cantidad de tiempo en milisegundos entre la transición de diapositivas.

Note

La transición automática de diapositivas no es completamente independiente del usuario de forma predeterminada. Al colocar el puntero del mouse sobre una diapositiva, se interrumpirá la transición de la diapositiva actual hasta que el puntero del mouse abandone el área de la diapositiva. Esto se puede evitar estableciendo la propiedad de pausa en false.

Advanced Example

Creemos un carrusel totalmente automatizado con el bucle habilitado. Cada diapositiva se sincronizará con un elemento de la lista en una lista. Al hacer clic en un elemento de la lista se activará un cambio de diapositiva.

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

desactivar gesturesSupport
desactivar los botones navigation
desactivar los indicators del carrusel
desactivar la pause en la interacción del usuario con la diapositiva
agregar interval de transición

Nuestro carrusel se verá así en la plantilla:

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <igx-slide *ngFor="let item of slides">
            <!-- Slides content goes here -->
        </igx-slide>
    </igx-carousel>
</div>
...

Estamos listos con la configuración del carrusel. Ahora sólo necesitamos agregar un componente de lista y sincronizar ambos componentes:

adding IgxList:

...
<div class="list-wrapper">
    <igx-list>
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

sincronizar los componentes conectándose al slideChanged del carrusel y a los eventos itemClicked de la lista:

Note

A partir de la versión 15.1.0, onSlideChanged pasó a llamarse slideChanged. El uso ng update migrará automáticamente su código antes de usar el nuevo nombre del evento.

  public ngOnInit() {
    this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

Estas configuraciones tendrán el siguiente resultado:

Angular Carousel Styling

Carousel Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Material Fluido Bootstrap Añil

Propiedad principal	Propiedad dependiente	Descripción
$button fondo	$button-hover-fondo	El color de fondo del botón al pasar el mouse.
	$button-flecha-color	El color de la flecha del botón.
	$button-disabled-background	El color de fondo del botón cuando está deshabilitado.
	$indicator-color-foco (Cuando no se proporciona $indicator fondo)	El color del indicador cuando está enfocado.
$button-hover-fondo	$button-hover-arrow-color	El color de la flecha del botón al pasar el mouse.
$button-disabled-background	$button-desactivado-flecha-color	El color de la flecha del botón cuando está deshabilitado.
$button-hover-arrow-color	$button-enfoque-flecha-color	El color de la flecha del botón cuando está enfocado.
$button-enfoque-flecha-color	$button-color-de-borde-de-enfoque	El color del borde del botón cuando está enfocado.
$indicator fondo	$indicator-borde-color	El color del borde del indicador.
	$indicator-color-punto-activo	El color del punto indicador cuando está activo.
	$indicator-color-foco	El color del indicador cuando está enfocado.
$indicator-color-punto-activo	$indicator-activo-hover-punto-color	El color del indicador cuando está activo y al pasar el ratón.
	$indicator-color-de-borde-activo	El color del borde del indicador cuando está activo.
$indicator-punto-color	$indicator-hover-punto-color	El color del punto indicador al pasar el mouse.

Propiedad principal	Propiedad dependiente	Descripción
$button fondo	$button-hover-fondo	El color de fondo del botón al pasar el mouse.
	$button-flecha-color	El color de la flecha del botón.
	$button-disabled-background	El color de fondo del botón cuando está deshabilitado.
	$button-color-de-borde-de-enfoque	El color del borde del botón cuando está enfocado.
	$indicator-color-foco (Cuando no se proporciona $indicator fondo)	El color del indicador cuando está enfocado.
$button-hover-fondo	$button-hover-arrow-color	El color de la flecha del botón al pasar el mouse.
$button-disabled-background	$button-desactivado-flecha-color	El color de la flecha del botón cuando está deshabilitado.
$button-hover-arrow-color	$button-enfoque-flecha-color	El color de la flecha del botón cuando está enfocado.
$indicator fondo	$indicator-borde-color	El color del borde del indicador.
	$indicator-color-punto-activo	El color del punto indicador cuando está activo.
	$indicator-color-foco	El color del indicador cuando está enfocado.
$indicator-color-punto-activo	$indicator-activo-hover-punto-color	El color del indicador cuando está activo y al pasar el ratón.
	$indicator-color-de-borde-activo	El color del borde del indicador cuando está activo.
$indicator-punto-color	$indicator-hover-punto-color	El color del punto indicador al pasar el mouse.

Propiedad principal	Propiedad dependiente	Descripción
$button fondo	$button-hover-fondo	El color de fondo del botón al pasar el mouse.
	$button-flecha-color	El color de la flecha del botón.
	$button-disabled-background	El color de fondo del botón cuando está deshabilitado.
	$button-color-de-borde-de-enfoque	El color del borde del botón cuando está enfocado.
	$indicator-color-foco (Cuando no se proporciona $indicator fondo)	El color del indicador cuando está enfocado.
$button-hover-fondo	$button-hover-arrow-color	El color de la flecha del botón al pasar el mouse.
$button-disabled-background	$button-desactivado-flecha-color	El color de la flecha del botón cuando está deshabilitado.
$button-hover-arrow-color	$button-enfoque-flecha-color	El color de la flecha del botón cuando está enfocado.
$indicator fondo	$indicator-borde-color	El color del borde del indicador.
	$indicator-color-punto-activo	El color del punto indicador cuando está activo.
	$indicator-color-foco	El color del indicador cuando está enfocado.
$indicator-color-punto-activo	$indicator-activo-hover-punto-color	El color del indicador cuando está activo y al pasar el ratón.
	$indicator-color-de-borde-activo	El color del borde del indicador cuando está activo.
$indicator-punto-color	$indicator-hover-punto-color	El color del punto indicador al pasar el mouse.

Propiedad principal	Propiedad dependiente	Descripción
$button fondo	$button-hover-fondo	El color de fondo del botón al pasar el mouse.
	$button-borde-color	El color del borde del botón.
	$button-flecha-color	El color de la flecha del botón.
	$button-disabled-background	El color de fondo del botón cuando está deshabilitado.
	$indicator-color-punto-activo (Cuando no se proporciona $indicator fondo)	El color del punto indicador cuando está activo.
$button-hover-fondo	$button-hover-arrow-color	El color de la flecha del botón al pasar el mouse.
$button-disabled-background	$button-desactivado-flecha-color	El color de la flecha del botón cuando está deshabilitado.
$button-borde-color	$button-hover-border-color	El color del borde del botón al pasar el ratón.
$button-hover-arrow-color	$button-enfoque-flecha-color	El color de la flecha del botón cuando está enfocado.
$indicator fondo	$indicator-punto-color	El color del punto indicador.
	$indicator-color-punto-activo	El color del punto indicador cuando está activo.
$indicator-punto-color	$indicator-hover-punto-color	El color del punto indicador al pasar el mouse.
	$indicator-borde-color	El color del borde del indicador.
$indicator-color-punto-activo	$indicator-activo-hover-punto-color	El color del indicador cuando está activo y al pasar el ratón.
	$indicator-color-de-borde-activo	El color del borde del indicador cuando está activo.
	$button-color-de-borde-de-enfoque	El color del borde del botón cuando está enfocado.
$indicator-activo-hover-punto-color	$indicator-color-foco	El color del indicador cuando está enfocado.

Usando la tematización Ignite UI for Angular, podemos alterar en gran medida la carousel apariencia.

Primero, para utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo index en nuestro archivo de estilo:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el tema del carrusel y, al proporcionar solo unos pocos parámetros básicos como $button-background y $indicator-background, el tema generará los colores específicos del estado apropiados y los primeros planos contrastantes. También puede anular cualquiera de los parámetros disponibles si desea tener más control sobre la apariencia.

$carousel-theme: carousel-theme(
  $button-background: #7c32dd,
  $indicator-background: #7c32dd,
);

El último paso es incluir el tema del componente.

@include css-vars($carousel-theme);

Manifestación

En el ejemplo siguiente se muestra un estilo sencillo aplicado a través de la Ignite UI for Angular Tema.

Styling with Tailwind

Puede diseñar el carousel uso de nuestras clases de utilidad personalizadas de Tailwind. Asegúrate de configurar Tailwind primero.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes de light ambos temas dark.

Usa light-* clases para el tema de la luz.
Usa dark-* clases para el tema oscuro.
Agregue el nombre del componente después del prefijo, por ejemplo, light-carousel, dark-carousel.

Una vez aplicadas, estas clases permiten cálculos de temas dinámicos. A partir de ahí, puede anular las variables CSS generadas usando arbitrary properties. Después de los dos puntos, proporcione cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puede encontrar la lista completa de propiedades en el tema del carrusel. La sintaxis es la siguiente:

<igx-carousel class="!light-carousel
![--indicator-background:#a7b6de] 
![--button-background:#a7b6de] 
![--indicator-border-color:#3E4853]">
  ...
</igx-carousel>

Note

El signo de exclamación (!) es necesario para garantizar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, su carrusel debería verse así:

Accessibility

WAI-ARIA Roles, States, and Properties

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 la función del conjunto de pestañas (indicadores de carrusel) se establece en tablist.
Cada elemento de diapositiva está configurado con tabpanel de función.
El elemento que sirve como contenedor para el conjunto de diapositivas igx se configura con aria-live ="polite". Ambas opciones son
- apagado: si el carrusel gira automáticamente.
- educado: si el carrusel NO gira automáticamente.

ARIA support

Componente carrusel

Attributes

aria-roledescription establecida en 'carrusel'.
aria-selected: se establece en verdadero o falso según la diapositiva activa.
aria-controls: establece un índice de diapositiva cuyo contenido está controlado por el elemento actual.
aria-live: se utiliza para establecer la prioridad con la que el lector de pantalla debe tratar las actualizaciones de las regiones activas; las configuraciones posibles son: desactivado y educado. La configuración predeterminada es educada. Cuando se establece la opción de intervalo, el atributo aria-live se desactivará.
Basado en diapositivas con etiqueta aria.
etiqueta-aria (botones)
- aria-label - para la diapositiva anterior.
- aria-label - para la siguiente diapositiva.

Componente deslizante

Papeles

attr.role="tabpanel": contenedor de los recursos asociados con una pestaña, donde cada pestaña está contenida en una lista de pestañas.

Attributes

id: sigue el patrón "panel-${this.index}"
aria-labelledby sigue el patrón "tab-${this.index}-${this.total}"
aria-seleccionada colocar activo deslizar. Indica la corriente seleccionado estado de un elemento deslizante en particular.

Descripción general del componente Carrusel Angular

Angular Carousel Example

Getting Started with Ignite UI for Angular Carousel

Note

Using the Angular Carousel Component

Adding slides with *ngFor

Angular Carousel Custom Examples

Configuring IgxCarousel

Custom indicators

Custom nav buttons

Slide containing other components

Manifestación

Angular Carousel Animations

Manifestación

Navigation

Pan gestures

Navegación por teclado

Automatic transitioning

Note

Advanced Example

Note

Angular Carousel Styling

Carousel Theme Property Map

Manifestación

Styling with Tailwind

Note

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Componente carrusel

Attributes

Componente deslizante

Papeles

Attributes

API References

Theming Dependencies

Additional Resources

Tematización