web design
Diseño web, JavaScript
0mayo 4, 2025

Introducción a Bootstrap Carousel

Un carrusel o slider es un componente web que presenta una secuencia de diapositivas (generalmente imágenes) que se desplazan automáticamente o mediante interacción del usuario. A menudo, permite superponer títulos y descripciones, e incluso incorporar un botón de llamada a la acción para impulsar la interacción del visitante con el sitio web  

1. Implementación básica: creación de un carrusel de imágenes simple

La estructura fundamental de un carrusel Bootstrap implica un contenedor ( .carousel ) con una identificación única , un contenedor interno ( .carousel-inner ) que contiene las diapositivas individuales ( .carousel-item ) y el contenido dentro de cada diapositiva (por ejemplo, una etiqueta < img > ).

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

2. Agregar controles e indicadores: Navegación para su carrusel

Para permitir que los usuarios naveguen manualmente por el carrusel, puede agregar botones “anterior” y “siguiente” e indicadores de diapositivas.

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" 
type="button" 
data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" 
type="button" 
data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <div class="carousel-indicators">
    <button type="button" 
data-bs-target="#carouselExampleControls" 
data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
    <button type="button" 
data-bs-target="#carouselExampleControls" 
data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" 
data-bs-target="#carouselExampleControls" 
data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
</div>
  • .carousel-control- prev y .carousel-control-next : estas clases crean los botones “anterior” y “siguiente”.
  • data-bs-target=”# carouselExampleControls ” : vincula el control al carrusel específico usando su ID.
  • data-bs-slide=” prev ” y data-bs-slide=”next” : atributos que activan la diapositiva anterior o siguiente.
  • .carousel-control- prev -icon y .carousel-control-next-icon : los íconos visuales para los controles. aria-hidden=”true” oculta estos íconos puramente decorativos de los lectores de pantalla.
  • .visually-hidden : una clase de utilidad de Bootstrap para proporcionar texto visualmente oculto pero accesible para el lector de pantalla para los controles.
  • .carousel-indicators : un contenedor para los botones indicadores.
  • data-bs-target=”# carouselExampleControls ” : Nuevamente, vincula los indicadores al carrusel.
  • data-bs-slide-to=”n” : especifica el índice de la diapositiva a la que debe navegar el indicador (comenzando desde 0).
  • .activo en uno de los botones indicadores indica la diapositiva activa actualmente.
  • aria-current=”true” : Indica el indicador activo a los lectores de pantalla.
  • aria-label=”Diapositiva n” : proporciona etiquetas descriptivas para cada indicador.

3. Agregar subtítulos: dar contexto a sus diapositivas

Puede agregar subtítulos a sus diapositivas utilizando el elemento .carousel-caption dentro de cada .carousel-item .

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" 
data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" 
data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" 
data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" class="d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" class="d-block w-100" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" class="d-block w-100" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" 
type="button" 
data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" 
type="button" 
data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • .carousel-caption : Este elemento contiene el texto del título. Por defecto, se ubica al final de la diapositiva.
  • .d-none d-md-block : Clases de utilidad de Bootstrap para ocultar el subtítulo en pantallas pequeñas ( xs , sm ) y mostrarlo en pantallas medianas (md) y más grandes . ayuda con capacidad de respuesta .

4. Crossfade Animación : para una transición suave

En lugar de la animación deslizante predeterminada, puede utilizar una transición de desvanecimiento agregando la clase .carousel-fade a su elemento .carousel

<div id="carouselExampleFade" 
class="carousel slide carousel-fade" 
data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" 
type="button" 
data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" 
type="button" 
data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

.carousel-fade : esta clase aplicada al contenedor principal .carousel habilita el efecto de fundido cruzado.

5. Configuración vía JavaScript

Los carruseles de Bootstrap requieren de código de JavaScript para funcionar. El atributo data-bs-ride=”carousel” inicializa automáticamente el carrusel. También, puedes inicializar los componentes y sus atributos con scripts personalizados.  

const carouselElement = document.querySelector('#myCarousel');

// Initialize the carousel manually
const carousel = new bootstrap.Carousel(carouselElement, {
  interval: 3000, // Change slides every 3 seconds (optional)
  wrap: true,    // Whether the carousel should cycle continuously (default: true)
  touch: true     // Whether to enable touch swiping (default: true)
});

// Control the carousel using JavaScript methods:
// carousel.next();
// carousel.prev();
// carousel.slideTo(index); // index is the 0-based index of the slide
// carousel.pause();
// carousel.cycle();

6. Consideraciones de accesibilidad: Cómo hacer que los carruseles sean inclusivos

Es fundamental que sus carruseles sean accesibles para todos los usuarios, incluidos aquellos con discapacidades:

  • texto alternativo para las imágenes: proporcione texto alternativo descriptivo para todas las imágenes dentro del carrusel.
  • Etiquetas claras para los controles: use la clase .visually-hidden para proporcionar etiquetas accesibles al lector de pantalla para los botones “anterior” y “siguiente”.
  • aria-label y aria-current para indicadores: asegúrese de que los botones indicadores tengan atributos aria-label adecuados para describir qué diapositiva controlan y aria-current=”true” para el indicador activo.
  • Considere pausar el movimiento en los eventos focus o hover: Para los carruseles que se reproducen automáticamente, considere pausar el ciclo cuando un usuario se centre en los controles del carrusel o en el propio carrusel para evitar que el contenido cambie inesperadamente. Esto se puede lograr mediante implementaciones de “event listener” en JavaScript.
  • Navegación con el teclado: Asegúrese de que los usuarios puedan navegar por los controles del carrusel usando el teclado (tecla Tab). Implementación predeterminada de Bootstrap.

7. Personalización: Adaptación de la apariencia

Puedes personalizar la apariencia de tus carruseles usando las clases de utilidad de Bootstrap y/o tu propio CSS personalizado. Algunos común personalizaciones incluir :

  • Tamaño: Ajuste del tamaño general del carrusel o de las imágenes dentro de él.
  • Controles e indicadores de estilo: cambiar la apariencia de los botones e indicadores de navegación (por ejemplo, colores, formas, posicionamiento).
  • Estilos de subtítulos: modificación de la fuente, el fondo y la posición de los subtítulos.
  • Transiciones: si bien Bootstrap ofrece funciones de deslizamiento y desvanecimiento , es posible agregar transiciones personalizadas más complejas con CSS, aunque esto requiere conocimientos más avanzados.

Recuerda utilizar reglas CSS específicas y específicas para evitar efectos secundarios no deseados en otros componentes de Bootstrap.

Post a Comment