Как получить общий и текущий слайд Количество каруселей

Не могли бы вы сообщить мне, как я могу получить общее и текущее количество карусельных слайдов в загрузочном лотке, как изображение ниже?

У меня есть стандартная карусель Bootstrap и <div> с классом .num для отображения общего и текущего числа, и я использовал этот код для извлечения чисел, но он не прошел через

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

Спасибо

Update:

Пожалуйста, найдите образец на этом jsfiddle LINK

Ответы

Ответ 1

Каждый slide имеет класс .item, вы можете получить общее количество слайдов, подобных этому

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

Active slide имеет класс с именем active, вы можете получить индекс active slide, как этот

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

Вы можете обновить эти значения, привязав событие карусели бутстрапа slid, подобное этому

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

ПРИМЕР

Ответ 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+'');
});

Ответ 3

Bootstrap 3.2 +:

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

Ответ 4

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 слайдов будет активным и не сможет получить активный индекс, поэтому сохраните код внутри функции времени ожидания

Ответ 5

Вы можете использовать функцию jquery index() для получения текущего индекса активного элемента внутри списка элементов. Таким образом, код выглядит следующим образом:

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

Ответ 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>