Jak uzyskać łączną i bieżącą liczbę slajdów karuzeli

Question

Czy możesz dać mi znać, w jaki sposób mogę uzyskać całkowitą i aktualną liczbę slajdów karuzeli w programie ładowania początkowego, jak na poniższym obrazku?

Mam standardową karuzelę Bootstrap i <div> z klasą .num aby wyświetlić całkowity i aktualny numer i użyłem ten kod, aby pobrać numery, ale nie przechodzą

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

Dzięki

Aktualizacja:

Proszę znaleźć próbkę w tym jsfiddle LINK

Answer 1

Każdy slide ma .item klasy do niego, można uzyskać całkowitą liczbę slajdów jak ten

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

Aktywny slide ma klasę o nazwie jak active, ty można dostać indeks active slide jak ten

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

można zaktualizować te wartości poprzez wiązanie bootstrap karuzela slid wydarzenie jak to

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

EXAMPLE

Answer 2

Bootstrap 3.2 lub nowszym:

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

Answer 3

Aktualizacja kodu @Khawer Zeshan za

Dla Bootstrap 3.0+ używać slid.bs.carousel zamiast slid i on zamiast bind. Więc kod aktualizacja będzie tak

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 4

Można użyć indeksu funkcji jQuery(), aby uzyskać bieżący indeks aktywnego elementu listy pozycji wewnątrz. Więc kod jest wyglądać tak:

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

Answer 5

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

po div wydarzenie slajdów będzie aktywny i nie może uzyskać aktywnego indeksu, więc bieżąco kodu wewnątrz ustawionego czasu poza funkcją

Answer 6

Jedyną wadą z poniżej kod będzie taki, że nie pojawi się, dopóki nie przejdziesz do następnego slajdu (wyzwalacze po każdej zmianie slajdu).

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>