jquery - カルーセルの合計および現在のスライド数を取得する方法

Question

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

標準のBootstrapカルーセルと、合計数と現在の数を表示<div>する.numクラスがあり、このコードを使用して数を取得しましたが、うまくいきませんでした

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

ありがとう

アップデート：

このjsfiddle LINKでサンプルを見つけてください

Answer 1

それぞれslideに.itemクラスがあり、このようにスライドの総数を取得できます

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

Activeslideには という名前のクラスがあり、このようなactiveインデックスを取得できますactive slide

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

slid次のようにブートストラップ カルーセル イベントをバインドすることで、これらの値を更新できます。

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

例

Answer 2

@Khawer Zeshan のコードの更新

Bootstrap 3.0+ のslid.bs.carousel代わりにslidおよびonの代わりに使用し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 3

ブートストラップ 3.2+:

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