So erhalten Sie die gesamte und aktuelle Folie Anzahl der Karussells

Question

Können Sie mir bitte mitteilen, wie ich die Gesamt- und die aktuelle Anzahl der Karussell-Folien im Bootstrap wie das Bild unten erhalten kann?

Ich habe ein Standard-Karussell Bootstrap und ein <div> mit der .num Klasse die Gesamt und aktuelle Nummer angezeigt werden und ich diesen Code die Zahlen abzurufen, aber es ging nicht durch

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

Dank

Update:

Bitte um eine Probe in diesem jsfiddle finden LINK

Answer 1

Jede slide eine .item Klasse hat, die Gesamtzahl der Folien wie diese

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

Aktive slide bekommen kann, hat eine Klasse als active genannt, Sie den Index active slide wie diese bekommen kann

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

Sie können diese Werte aktualisieren, indem Sie die Bootstrap-Bindung Karussell slid Ereignis wie dieses

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

EXAMPLE

Answer 2

Bootstrap 3.2+:

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

Answer 3

Update der @Khawer Zeshan Code

Für Bootstrap slid.bs.carousel statt slid und on verwenden 3.0+ statt bind. So wird der Update-Code wie sein, dass

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

Sie können jquery Index() Funktion den aktuellen Index der aktiven Element innerhalb Liste der Artikel zu erhalten. So ist der Code wie folgt aussehen:

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); 
    }); 

nach Dia Event div aktiv sein und nicht aktiv Index bekommen können, so halten Sie Code innerhalb eingestellten Zeit out-Funktion

Answer 6

Der einzige Nachteil bei der unter dem Code wird sein, dass es nicht angezeigt wird, bis Sie zur nächsten Folie gehen (löst nach jedem Folienwechsel aus).

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>