jquery - tipos - Cómo obtener el número total y actual de diapositivas del carrusel

tipos de carrusel en bootstrap

Question

¿Me puede decir cómo puedo obtener el número total y actual de las diapositivas del carrusel en bootstrap como en la imagen de abajo?

Tengo un carrusel estándar de Bootstrap y un <div> con la clase .num para mostrar el número total y actual, y utilicé este código para recuperar los números pero no se realizó.

$(''.num'').html(){
  $(''#myCarousel'').carousel({number})
}

Gracias

Actualizar:

Por favor encuentre una muestra en este jsfiddle LINK

Answer 1

Actualización del código de @Khawer Zeshan

Para Bootstrap 3.0+, use slid.bs.carousel lugar de slid.bs.carousel y on lugar de bind . Así que el código de actualización será así.

var totalItems = $(''.item'').length;
var currentIndex = $(''div.active'').index() + 1;

$(''#myCarousel'').on(''slid.bs.carousel'', function() {
    currentIndex = $(''div.active'').index() + 1;
   $(''.num'').html(''''+currentIndex+''/''+totalItems+'''');
});

Answer 2

Bootstrap 3.2+:

carouselData.getItemIndex(carouselData.$element.find(''.item.active''))

Answer 3

Cada slide tiene una clase .item , puede obtener el número total de diapositivas como esta

var totalItems = $(''.item'').length;

La slide activa tiene una clase denominada como active , puede obtener el índice de active slide esta manera

var currentIndex = $(''div.active'').index() + 1;

Puede actualizar estos valores vinculando el evento slid del carrusel bootstrap como este

$(''#myCarousel'').bind(''slid'', function() {
    currentIndex = $(''div.active'').index() + 1;
   $(''.num'').html(''''+currentIndex+''/''+totalItems+'''');
});

EXAMPLE

Answer 4

El único inconveniente con el siguiente código será que no se mostrará hasta que pase a la siguiente diapositiva (se dispara después de cada cambio de diapositiva).

JS / jQuery

$(''#carousel-slide'').on(''slid.bs.carousel'', function () {
  var carouselData = $(this).data(''bs.carousel'');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;

  var text = (currentIndex + 1) + " of " + total;
  $(''#carousel-index'').text(text);
});

HTML

<div id="carousel-index">
  <!-- Number will be added through JS over here -->
</div>

Answer 5

Puede usar la función de índice jquery () para obtener el índice actual del elemento activo dentro de la lista de elementos. Así que el código se ve así:

var currentItem = $("#carousel-1 .item.active" );
var currentIndex = $(''#carousel-1 .item'').index(currentItem) + 1;

Answer 6

var totalItemsPop = $(''#Mycarousel .item'').length; 
$(''#Mycarousel'').on(''slide.bs.carousel'', function() {
       setTimeout(function(){ 
            currentIndexPop = $(''#Mycarousel div.active'').index() + 1;
            $(''.num'').html('''' + currentIndexPop + ''/'' + totalItemsPop + '''');
         }, 1000);
   });

después de que el evento de diapositivas div estará activo y no pueda obtener el índice activo, así que mantén el código dentro de la función de tiempo límite establecido