Descripción general del componente del carrusel Angular
Ignite UI for Angular Carousel es un componente liviano y receptivo 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 Angular Carousel le permite utilizar 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 Angular Carousel que 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 y viniendo.
Getting Started with Ignite UI for Angular Carousel
Para comenzar con el componente Ignite UI for Angular Carousel, 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 a la 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 ha importado la Ignite UI for Angular Carousel, puede comenzar a usar el componente igx-carousel
.
Using the Angular Carousel Component
El componente Ignite UI for Angular Carousel se puede usar como un elemento de pantalla completa o ubicarse 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 en Angular tiene su propiedad de entrada loop
establecida en true
(el bucle ocurre cuando la primera diapositiva viene después de la última navegando usando la acción Siguiente, o cuando la última diapositiva viene después de la primera usando la acción Anterior). El comportamiento del bucle se puede desactivar estableciendo el valor de la entrada del loop
en false
.
Para realizar un seguimiento de cada índice de diapositivas, el carrusel tiene indicadores que se colocan en el bottom
carrusel de forma predeterminada. Para cambiar este comportamiento, tenemos que usar la propiedad indicatorsOrientation y asignarla a top
. Los indicadores se pueden deshabilitar estableciendo la propiedad de indicators
entrada en false
.
Custom indicators
Para agregar indicadores de carrusel personalizados Angular tendremos que usar 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.
Navigation
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).
Navegación por teclado
- 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:
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
Roles:
- 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.
API References
- Componente IgxCarousel
- Estilos de componentes IgxCarousel
- Componente IgxSlide
- Componente IgxList
- Componente IgxListItem
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.