Cómo convertir los indicadores del carrusel de Bootstrap en barras de progreso animadas

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, trabajaremos con otra interesante extensión de Bootstrap. De manera concreta, crearemos un componente de carrusel de Bootstrap y personalizaremos sus indicadores para que parezcan barras de progreso animadas. De ese modo, tendremos una perspectiva clara de cuándo se cargará la siguiente diapositiva.

Nuestra extensión del carrusel de Bootstrap

Esto es lo que vamos a crear:

Please accept marketing cookies to load this content.

1. Crea un carrusel de Bootstrap con indicadores

Suponiendo que ya hemos instalado los archivos de Bootstrap necesarios, primero crearemos un carrusel de imágenes (imágenes de Unsplash) con indicadores, aprovechando el código básico para el componente de carrusel que nos ofrece el framework.

Este es el código necesario

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
      <span></span>
    </button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
      <span></span>
    </button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
      <span></span>
    </button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bs-carousel1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-carousel2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-carousel3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Presta atención a dos cosas:

Añadimos el atributo data-bs-pause="false" para evitar pausar el carrusel cuando pasemos el puntero del mouse sobre él.
Agregamos un elemento span a cada indicador de carrusel. Eso actuará como nuestra barra de progreso.

2. Personaliza los indicadores de Bootstrap

Como siguiente paso, personalizaremos el estilo de los indicadores predeterminados. Los haremos más grandes y posicionaremos de manera absoluta su elemento span de arriba. Al principio, los elementos span tendrán un ancho cero. Ese ancho aumentará gradualmente tan pronto como se active la diapositiva correspondiente.

The indicators layout before and after our styles

Estos son los estilos asociados:

.carousel-indicators [data-bs-target] {
  position: relative;
  width: 60px;
  height: 6px;
  border: none;
  border-radius: 24px;
}

.carousel-indicators [data-bs-target] span {
  content: ’’;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #7952b3;
  border-radius: inherit;
}

3. Crea un elemento de progreso para cada diapositiva

Cuando se cargue la página o cambie una diapositiva, se activará la función fillCarouselIndicator().

Esta función recibirá como parámetro la diapositiva activa. Al comienzo, consideraremos que la primera diapositiva es la activa.

Adentro, haremos las siguientes cosas:

Ejecutaremos una función cada 50 ms cuyo trabajo será animar gradualmente el ancho del elemento span del indicador activo hasta el 100%.
Al principio, estableceremos el ancho de todos los elemetos span en cero y cancelaremos la ejecución de la llamada programada (si la hubiera). Hacemos esto como precaución en caso de que decidamos cambiar una diapositiva antes del comportamiento de reproducción automática por defecto de Bootstrap (cada 5000 ms).

Prevent the execution of the scheduled call

Tomando en cuenta todo lo anterior, aquí está el código asociado:

...

function fillCarouselIndicator(index) {
  let i = 0;
  // 2
  for (const carouselIndicator of carouselIndicators) {
    carouselIndicator.style.width = 0;
  }
  clearInterval(intervalID);

  // 1
  intervalID = setInterval(function () {
    i++;
    myCarousel.querySelector(".carousel-indicators .active span").style.width =
      i + "%";
  }, 50);
}

De manera predeterminada, el componente de carrusel cambia la diapositiva activa cada 5000 ms. Para sincronizar este comportamiento con nuestro código, la función dentro del método setInterval() debe ejecutarse cada 50ms. Normalmente, su última llamada es cuando el valor de la variable i se establece en 100 (100 * 50 = 5000). Si, por algún motivo, deseas cambiar el tiempo predefinido necesario para el ciclo entre diapositivas, recuerda, además, modificar el tiempo del intervalo correspondientemente. Por ejemplo, si estableces el tiempo del intervalo del carrusel en 6000, tienes que asignar 60 como el segundo parámetro de nuestro método de intervalo.

¿Precisión?

Si alguna vez has trabajado con temporizadores en JavaScript (setTimeout(), setInterval()), quizá hayas visto que no siempre son precisos. Además, pueden comportarse de manera diferente en distintos navegadores/dispositivos.

En mis pruebas, nuestro ejemplo funcionó bien en navegadores como Chrome y Edge, pero en Firefox, la siguiente diapositiva era mostrada mientras que el indicador activo tenía un ancho de alrededor del 80%.

Por lo tanto, vamos a realizar un arreglo simple para garantizar la compatibilidad con los navegadores. De manera más específica añadiremos tres cosas:

Primero, obtendremos una referencia para nuestro carrusel. Eso nos dará la posibilidad de usar sus métodos API.
Luego, cada vez que una diapositiva cambie, detendremos el carrusel.
Por último, forzaremos la navegación a la siguiente diapositiva tan pronto como el ancho del elemento span activo sea del 100%. Con esta incorporación, el atributo data-bs-pause="false" que agregamos anteriormente no desempeñará ninguna función, así que puedes eliminarlo si lo deseas.

Este es el código JavaScript adicional que se necesita para esta funcionalidad:

// 1
const carousel = new bootstrap.Carousel(myCarousel);

function fillCarouselIndicator(index) {
  ...
  // 2
  carousel.pause();

  intervalID = setInterval(function () {
    ...

    if (i >= 100) {
      // 3
      carousel.next();
    }
  }, 50);
}

En lugar del evento slide.bs.carousel que usamos aquí, también puedes utilizar slid.bs.carousel. En este caso, tienes que personalizar un poco el código.

Conclusión

¡Eso es todo, amigos! En este breve ejercicio, aprendimos cómo crear carruseles de Bootstrap únicos convirtiendo sus indicadores en barras de progreso animadas.

Esperemos que esta técnica haya sido beneficiosa y que planeen incorporarla en uno de sus próximos proyectos.

Una vez más, esto es lo que creamos: