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 requiere que HammerModule se importe en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se esperaba.

// 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 están ubicados en la bottom del carrusel de forma predeterminada. Para cambiar este comportamiento, tenemos que usar la propiedad IndicatorsOrientation y asignarla a top. Los indicadores se pueden desactivar agregando una plantilla vacía.

La plantilla de carrusel puede verse así:

<div class="carousel-container">
    <igx-carousel #carousel [loop]="false">
      ...
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>

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

• Para navegar a la diapositiva siguiente / anterior, tienes que utilizar, respetuosamente:
  • Tecla Arrow Right para la siguiente diapositiva
  • Tecla Arrow Left para la diapositiva anterior
• Para navegar hasta la diapositiva final / inicio tienes que usar, respetuosamente:
  • Tecla End para la corredera final
  • Tecla Home para la diapositiva de inicio

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" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <div class="slides-wrapper">
            <igx-slide *ngFor="let item of slides">
                  <!-- Slides content goes here -->
             </igx-slide>
        </div>
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </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

• Tema IgxIcon

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub