Los carruseles, también conocidos como deslizadores de imágenes, son elementos interactivos utilizados para mostrar una serie de imágenes o elementos de contenido de forma rotativa. Se emplean frecuentemente para mostrar productos, elementos de portafolio o contenido destacado.

Características clave

El componente de carrusel de Bootstrap es una herramienta potente para crear experiencias de usuario atractivas. Ofrece ciclo automático, controles de navegación y opciones de personalización para efectos de transición, temporización e indicadores.

Clases de uso

• carousel: Esta clase se aplica al elemento contenedor del carrusel;
• carousel-inner: Esta clase se aplica a un elemento <div> dentro del contenedor. Envuelve todos los elementos del carrusel (diapositivas) y define el contenido interno del carrusel;
• carousel-item: Esta clase se aplica a las diapositivas individuales dentro del carrusel. Cada carousel-item representa una diapositiva en el carrusel;
• active: Esta clase marca una diapositiva como activa o la diapositiva que se muestra actualmente. Garantiza que la diapositiva correspondiente sea visible cuando se renderiza el carrusel;
• carousel-control-prev y carousel-control-next: Estas clases se aplican a los botones de navegación anterior y siguiente. Proporcionan controles para que los usuarios naveguen manualmente por el carrusel;
• data-bs-target y data-bs-slide: Estos atributos se utilizan con los botones de navegación para especificar el carrusel objetivo y la dirección de las transiciones de diapositivas;
• carousel-indicators: Esta clase se aplica a una lista de elementos indicadores (generalmente elementos <li>) que representan cada diapositiva del carrusel;
• data-bs-interval y data-bs-pause: Estos atributos configuran el intervalo (en milisegundos) entre transiciones de diapositivas y especifican si el carrusel debe pausarse al pasar el cursor o al recibir el foco.