¿Hay alguna manera de agregar un número para la diapositiva actual y las diapositivas totales al siguiente ejemplo de carrusel usando Bootstrap 5? Los contadores se representan en el div carousel-pager continuación, siendo el pager-current el número de diapositiva actual y pager-total el número total de diapositivas.
<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-total">00</div> </div> </div>listo :
var imgs = [].slice.call(document.getElementsByClassName('container')[0].getElementsByTagName('*'),0); document.getElementsByClassName('total')[0].innerHTML = imgs.length ; //create a global variable var currentImg = 1;y agregue esto a cualquier cosa que cambie la imagen actual como un botón o un temporizador ...:
document.getElementsByClassName('pager-current')[0].innerHTML = (++currentImg) % imgs.length ;