Carousel
Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.
Cómo funciona
El carrusel es una presentación de diapositivas para recorrer una serie de contenido, construido con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcado personalizado. También incluye soporte para controles e indicadores anteriores / siguientes.En los navegadores donde se admite la API de visibilidad de la página , el carrusel evitará que se deslice cuando la página web no sea visible para el usuario (como cuando la pestaña del navegador está inactiva, la ventana del navegador está minimizada, etc.).
El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad . Tenga en cuenta que los carruseles anidados no son compatibles y, por lo general, los carruseles no cumplen con los estándares de accesibilidad.
Por último, si está construyendo nuestro JavaScript desde la fuente, requiereutil.js .
Ejemplo
Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que deba utilizar utilidades adicionales o estilos personalizados para dimensionar el contenido de manera adecuada. Si bien los carruseles admiten controles e indicadores anteriores / siguientes, no se requieren explícitamente. Agregue y personalice como mejor le parezca.La .activeclase debe agregarse a una de las diapositivas, de lo contrario, el carrusel no será visible. También asegúrese de establecer una identificación única en los .carouselcontroles opcionales, especialmente si está utilizando varios carruseles en una sola página. Los elementos de control e indicador deben tener un data-targetatributo (o hrefpara enlaces) que coincida con el id del .carouselelemento
