カルーセルの合計と現在のスライド番号を取得する方法

Question

以下の画像のように、ブートストラップでカルーセルスライドの合計と現在の数を取得する方法を教えてください。

私は合計と現在の数を表示するには.numクラスに標準のブートストラップカルーセルと<div>を持っていると私は番号を取得するためにこのコードを使用しますが、それは

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

を通過しませんでした

おかげ

更新：

各slideがそれに.itemクラスを持って、あなたはこの

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

アクティブslideのようなスライドの総数はあなた、activeという名前のクラスを持ってもらうことができます。このjsfiddle LINK

Answer 1

でサンプルを見つけてください。あなたは、ブートストラップを結合することによって、これらの値を更新することができ

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

このよう active slideのインデックスを取得することができますこの

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

EXAMPLE

Answer 2

ブートストラップ3.2以上のようなカルーセルslidイベント：ブートストラップ用

がslid.bs.carousel代わりのslidとonを使用する代わりに3.0+ @Khawer Zeshanのコードの

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

Answer 3

更新bind。したがって、更新コードはそのようになります

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

jquery index（）関数を使用すると、項目リスト内のアクティブな要素の現在のインデックスを取得できます。だから、コードは次のようになります：

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

スライドイベントdivがアクティブになり、アクティブなインデックスを取得するので、設定時間アウト機能

Answer 6

との唯一の欠点の内側にあなたのコードを維持することはできませんした後、下のコードは、次のスライドに移動するまで表示されません（各スライドの変更後にトリガー）。あなたはカルーセルプラグインを使用している

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>