Descripción general del carrusel de Web Components

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

Web Components Carousel Example

La demostración de Web Components Carousel que ve a continuación muestra diapositivas que contienen solo imágenes.

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselOverview {
    constructor() {}
}

new CarouselOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png"/>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-container {
    padding: 16px;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: fill;
    max-width: 90%;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 450px;
}

igc-carousel-slide::part(base) {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
    margin-inline: auto;
}css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

A continuación, tendrás que importar el IgcCarouselComponent CSS necesario y registrar su módulo, de la siguiente manera:

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCarouselComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

Ahora que tiene el carrusel de Ignite UI for Web Components importado, puede comenzar con una configuración básica del IgcCarouselComponent y sus diapositivas.

Usa el IgcCarouselComponent selector para envolver tus diapositivas. Las diapositivas pueden contener cualquier contenido html válido, incluidos otros componentes.

<igc-carousel>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-indigo-design.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/slider-image-chart.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-charts.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

Si desea que una diapositiva esté activa de forma predeterminada, utilice el Active atributo:

<igc-carousel>
    ...
    <igc-carousel-slide>
        ...
    </igc-carousel-slide>
    <igc-carousel-slide active>
        ...
    </igc-carousel-slide>
</igc-carousel>
html

If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account.

Examples

Carousel Configuration

De forma predeterminada, el IgcCarouselComponent tiene su disableLoop propiedad establecida en falso (El bucle se produce cuando la primera diapositiva viene después de la última navegando con 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 propiedad disableLoop propiedad a verdadero.

<igc-carousel disable-loop="true">
    ...
</igc-carousel>
html

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.

<igc-carousel indicators-orientation="start">
    ...
</igc-carousel>
html

De forma predeterminada, muestra IgcCarouselComponent sus botones de navegación e indicadores. Utilice la hideIndicators propiedad para ocultar los indicadores y la hideNavigation propiedad para ocultar los botones de navegación.

<igc-carousel hide-navigation="true" hide-indicators="true">
    ...
</igc-carousel>
html

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

<igc-carousel vertical="true">
    ...
</igc-carousel>
html

Custom indicators

Para agregar Web Components indicadores de carrusel personalizados, use lo IgcCarouselIndicatorComponent siguiente:

<igc-carousel>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>

    <igc-carousel-slide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg"/>
    </igc-carousel-slide>
</igc-carousel>
html

El componente Carrusel Ignite UI for Web Components permite a los usuarios utilizar diferentes elementos para el estado activo e inactivo de un solo indicador. Es obligatorio proporcionar dos elementos para cada ranura (vacío y activo) al declarar un indicador, incluso si son los mismos.

Para lograr esto, use las previous-button ranuras y next-button:

<igc-carousel>
    <igc-icon slot="previous-button" name="previous" collection="material"></igc-icon>
    <igc-icon slot="next-button" name="next" collection="material"></igc-icon>
    ...
</igc-carousel>
html

Slide containing other components

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

<igc-carousel>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <igc-input type="text" placeholder="Username">
                    <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                    <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <igc-input type="text" placeholder="Search">
                    <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
</igc-carousel>
html

Manifestación

import { defineComponents, IgcButtonComponent, IgcCarouselComponent, IgcIconComponent, IgcInputComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcInputComponent, IgcButtonComponent, IgcIconComponent);

const icons = [
    {
        name: "person",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/></svg>'
    },
    {
        name: "password",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z"/></svg>'
    },
    {
        name: "search",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>'
    }
];

export class CarouselComponents {
    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText);
        });
    }
}

new CarouselComponents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel With Components</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/SignUp.svg">
              <form>
                <igc-input type="text" placeholder="Username">
                  <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                  <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/Route.svg">
              <form>
                <igc-input type="text" placeholder="Search">
                  <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.carousel-container {
    padding: 16px;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 500px;
}

igc-carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

igc-carousel-slide div {
    text-align: center;
    max-width: 40%;
    margin-inline: auto;
}

igc-carousel-slide div * {
    margin-block: 8px;
}css

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

Use the animationType property to change the animation.

<igc-carousel animation-type="fade">
    ...
</igc-carousel>
html

Setting none to the animationType property disables the animations.

Manifestación

La siguiente demostración muestra los diferentes tipos de animaciones que admite el carrusel.

import { defineComponents, IgcButtonComponent, IgcCardComponent, IgcCarouselComponent, IgcSelectComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcSelectComponent, IgcCardComponent, IgcButtonComponent, IgcSwitchComponent);

export class CarouselAnimations {
    private carousel: IgcCarouselComponent;
    private select: IgcSelectComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.carousel = document.querySelector('igc-carousel') as IgcCarouselComponent;
        this.select = document.querySelector('igc-select') as IgcSelectComponent;
        this.switch = document.querySelector('igc-switch') as IgcSwitchComponent;

        this.select.addEventListener("igcChange", (e) => {
            const animation = e.detail.value as 'slide' | 'fade' | 'none';
            this.carousel.animationType = animation;
        });

        this.switch.addEventListener("igcChange", (e) => {
            this.carousel.vertical = e.detail.checked;
        });
    }
}

new CarouselAnimations();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Animations</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-wrapper">
        <div class="action-wrapper">
          <div class="action">
            <span>Animation type</span>
            <igc-select id="select">
              <igc-select-item value="slide" selected>Slide</igc-select-item>
              <igc-select-item value="fade">Fade</igc-select-item>
              <igc-select-item value="none">None</igc-select-item>
            </igc-select>
          </div>
          <div class="action">
            <igc-switch label-position="before">Vertical alignment</igc-switch>
          </div>
        </div>
        <igc-carousel hide-indicators>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Angular</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>30+ Material-based Angular components to code speedy web apps faster.</p>
                </igc-card-content> 
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Javascript</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ultimate UI for ASP.NET</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/aspnet" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-wrapper {
    height: 600px;
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.action-wrapper {
    height: 40px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.action {
    display: flex;
    align-items: center;
}

.slide-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

igc-carousel {
    border: 0.5px solid #dde0e4;
}

igc-select {
    width: 150px;
    margin-left: 10px;
    --ig-size: var(--ig-size-small);
}

igc-card {
    border: none;
}

igc-card-header {
    padding: 8px 16px;
}css

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, indicadores, navegación con el teclado e interacción táctil en dispositivos móviles.

Touch gestures

De forma predeterminada, el carrusel se puede usar en cualquier dispositivo táctil.

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

Se IgcCarouselComponent 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 solo un intervalo de transición en la interval propiedad, que determina la cantidad de tiempo en milisegundos entre la transición de las diapositivas.

Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. This can be prevented by setting disablePauseOnInteraction property to true.

<igc-carousel interval="2000" disable-pause-on-interaction="true">
    ...
</igc-carousel>
html

Advanced Example

Vamos a crear un carrusel totalmente automatizado con el bucle activado. Configuraremos los indicadores para que sean una representación en miniatura de cada diapositiva.

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

Habilitar la disablePauseOnInteraction propiedad
enable the hideNavigation property
Habilitar la vertical propiedad
add transition interval
Agregar personalizado IgcCarouselIndicatorComponent para cada diapositiva

Nuestro carrusel se verá así en la plantilla:

<igc-carousel
    disable-pause-on-interaction="true"
    hide-navigation="true"
    vertical="true"
    interval="2000"
    animation-type="fade"
>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
        
    <igc-carousel-slide>
        <img src="assets/images/carousel/WonderfulCoast.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/CulturalDip.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/GoldenBeaches.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/IslandOfHistory.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/AmazingBridge.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

Estas configuraciones tendrán el siguiente resultado:

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselThumbnail {
    constructor() {}
}

new CarouselThumbnail();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Thumbnail</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-carousel
          disable-pause-on-interaction
          hide-navigation
          interval="2000"
          vertical
          animation-type="fade"
        >
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
        
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"
              alt="Wonderful Coast"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"
              alt="Cultural Dip"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"
              alt="Golden Beaches"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"
              alt="Island Of History"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"
              alt="Amazing Bridge"
            />
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-carousel {
    margin-inline: auto;
    max-width: 75%;
}

igc-carousel::part(indicators) {
    border-radius: 2px;
}

.blurred {
    filter: blur(2px);
    opacity: 0.5;
}css

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 el conjunto de pestañas (indicadores de carrusel) es con rol tablist.
Cada elemento de diapositiva está configurado con tabpanel de función.

ARIA support

Componente de carrusel

Attributes
- aria-roledescription establecido en "carrusel".
- aria-live: se utiliza para establecer la prioridad con la que el lector de pantalla debe tratar las actualizaciones a las regiones en vivo: las configuraciones posibles son: desactivado y cortés. La configuración predeterminada es cortés y se establece en el elemento que sirve como contenedor para el conjunto de diapositivas. Cuando se establece la interval opción y el carrusel está en estado de reproducción, el atributo aria-live se establecería en off.
- aria-label (navigation buttons) - "Previous slide"/"Next slide".

Slide component

Attributes
- id - sigue el patrón "igc-carousel-slide-${incremented_number}".
- aria-roledescription establecido en "slide".
- aria-label sigue el patrón "${index + 1} of ${total}".

Indicator component

Attributes
- aria-label sigue el patrón "Slide ${index + 1}"
- Aria-Selected se establece en verdadero o falso en función de la diapositiva activa.

Descripción general del carrusel de Web Components

Web Components Carousel Example

Usage

Examples

Carousel Configuration

Custom indicators

Custom navigation buttons

Slide containing other components

Manifestación

Animations

Manifestación

Navigation

Touch gestures

Navegación por teclado

Automatic transitioning

Advanced Example

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

Componente de carrusel

Slide component

Indicator component

API References

Additional Resources