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.

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    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
    cmd

    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:

    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 {}
    typescript

    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 {}
    typescript

    Ahora que ha importado la Ignite UI for Angular Carousel, puede comenzar a usar el componente igx-carousel.

    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.

    Agregar diapositivas con *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' }
        ];
    }
    typescript
    <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>
    html

    Configurando IgxCarrusel

    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.

    Indicadores personalizados

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

    Botones de navegación personalizados

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

    Diapositiva que contiene otros componentes.

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

    Manifestación

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

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

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    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.

    Gestos panorámicos

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

    Transición automática

    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.

    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.

    Ejemplo avanzado

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

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

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

    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;
        });
      }
    typescript

    Estas configuraciones tendrán el siguiente resultado:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Accesibilidad

    Funciones, estados y propiedades de WAI-ARIA

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

    Soporte ARIA

    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.

    Referencias de API

    Dependencias temáticas

    Recursos adicionales

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