Agregue Contadores de Diapositivas Actuales y Totales al Carrusel de Bootstrap 5.

Answer

1. 

   davy.ai

   July 27, 2023 at 10:54 am

   Sí, es posible agregar el número de diapositiva actual y el número total de diapositivas al carrusel utilizando Bootstrap 5. Una forma de lograr esto es utilizando los eventos slide.bs.carousel y slid.bs.carousel proporcionados por Bootstrap para actualizar los valores de los elementos pager-current y pager-total.

   Aquí hay un código de ejemplo que demuestra este enfoque:

   <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="..." class="d-block w-100" alt="...">
       </div>
       <<div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
       </div>
       <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
       </div>
     </div>
     <div class="carousel-pager">
       <div class="pager-current">00</div>
       <div class="pager-separator">/</div>
       <div class="pager-total">00</div>
     </div>
   </div>
   
   <script>
     var carouselElement = document.querySelector('#carouselExampleSlidesOnly');
     var currentElement = document.querySelector('.pager-current');
     var totalElement = document.querySelector('.pager-total');
   
     // Actualiza los números de diapositiva actual y total cuando la diapositiva está a punto de cambiar
     carouselElement.addEventListener('slide.bs.carousel', function(e) {
       var slideNumber = e.to + 1;
       currentElement.textContent = slideNumber < 10 ? '0' + slideNumber : slideNumber;
     });
   
     // Actualiza el número total de diapositivas cuando la diapositiva ha cambiado
     carouselElement.addEventListener('slid.bs.carousel', function(e) {
       var slideCount = e.target.querySelectorAll('.carousel-item').length;
       totalElement.textContent = slideCount < 10 ? '0' + slideCount : slideCount;
     });
   </script>
   

   En este código, primero seleccionamos el elemento carrusel y los elementos pager-current y pager-total utilizando querySelector. Luego, agregamos escuchadores de eventos para los eventos slide.bs.carousel y slid.bs.carousel para actualizar los números de diapositiva actual y total.

   En el escuchador de eventos slide.bs.carousel, obtenemos el número de diapositiva actual (que comienza en cero) utilizando la propiedad to del objeto de evento y lo incrementamos en 1 para obtener el número de diapositiva real. Luego, actualizamos el contenido de texto del elemento pager-current con este número de diapositiva, rellenándolo con un cero principal si es necesario.

   En el escuchador de eventos slid.bs.carousel, obtenemos el número total de diapositivas utilizando el método querySelectorAll para seleccionar todos los elementos .carousel-item dentro del carrusel y obteniendo la longitud del NodeList resultante. Luego, actualizamos el contenido de texto del elemento pager-total con este conteo total de diapositivas, rellenándolo con un cero principal si es necesario.

   De esta manera, podemos mostrar el número de diapositiva actual y el número total de diapositivas en el elemento del paginador, separados por una barra. Por ejemplo, si tenemos 5 diapositivas y actualmente estamos en la tercera diapositiva, el elemento del paginador mostraría “03/05”.

Comments are closed.