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 elHammerModule opcional. Puede importarse 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,16.0.0 puedes importarlosIgxCarouselComponent como una dependencia independiente, o usar elIGX_CAROUSEL_DIRECTIVES token 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 tienes importado el módulo o directivas Ignite UI for Angular Carousel de la empresa, puedes empezar a usar eligx-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

Por defecto, el carrusel en Angular tiene suloop propiedad de entrada configurada comotrue (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 laloop entrada enfalse.

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

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.

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

Por defecto, muestraIgxCarousel sus botones de navegación e indicadores. Usa laindicators propiedad para ocultar los indicadores y lanavigation propiedad para ocultar los botones de navegación.

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

SoportaIgxCarousel el modo vertical. Utiliza lavertical 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 laslide animación por defecto, pero también lo soportafade como animación alternativa.

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

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

Configurarnone laanimationType entrada desactiva 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

Por defecto, el carrusel puede usarse en cualquier dispositivo con capacidad táctil. Esto es opcional y puede cambiarse configurando la propiedad gesturesSupport parafalse.

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 siguiente/anterior diapositiva.
Indicadores
- Arrow Leftclave - navega a la diapositiva anterior (siguiente en modo de derecha a izquierda).
- Arrow Rightclave - navega a la siguiente diapositiva (anterior en modo de derecha a izquierda).
- Homeclave - navega hasta la primera diapositiva (la última en modo de derecha a izquierda).
- Endclave - navega hasta la última diapositiva (la primera en 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 deslizamiento no es completamente independiente del usuario por defecto. Colocar el puntero del ratón sobre una diapositiva interrumpirá la transición actual de la corredera hasta que el puntero del ratón salga de la zona de la corredera. Esto se puede evitar configurando la propiedad de pausa parafalse.

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:

desactivargesturesSupport
Desactiva losnavigation botones
Desactiva el carruselindicators
Desactiva lapause interacción de usuario con la diapositiva
Añadir transicióninterval

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

Sincronización de los componentes conectándose a los elementos delslideChanged carrusel y de la lista. Eventos clicados:

Note

A partir de la versión 15.1.0onSlideChanged se renombró aslideChanged. Usarng update automáticamente migrará tu 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 Ignite UI for Angular tematización, podemos alterar mucho lacarousel apariencia.

Primero, para usar las funciones expuestas por el motor de temas, necesitamos importar elindex archivo 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 sencillo, creamos un nuevo tema que extiende el tema del carrusel y, proporcionando solo unos pocos parámetros base como$button-background y,$indicator-background el tema generará los colores específicos de estado y los primeros planos contrastantes apropiados. También puedes anular cualquiera de los parámetros disponibles si quieres 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

Puedes decorarloscarousel usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

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 tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-carousel,dark-carousel.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona 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 asegurar 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

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) está configurado comotablist.
Cada elemento de la diapositiva está asignado por su funcióntabpanel.
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