Как найти номер и количество слайдов в карусели owl carousel 2?

Question

[ligisayan]

Есть карусель Owl Carousel 2 в которой хочу получать номер текущего слайда и количество всех слайдов (вместо 1 и N) - как это можно сделать?
Рабочий фидл

<div class="owl-carousel">
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
    <div class="item"><h4></h4></div>
</div>
<p>№1 из N</p>

var owl = $('.owl-carousel');

owl.owlCarousel({
    loop: true,
    items:1,
    margin: 10,
    nav: true,
    afterAction : afterAction
});

function afterAction() {
	updateResult(".currentItem", this.owl.currentItem);
}

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

Обращаю внимание на тот момент, что слайдов может быть разное количество (не ориентируемся на подсчет слайдов в html) и карусель зациклена в бесконечность, т.е. количество слайдов в исходном коде и html не совпадают (там есть клонированные слайды).

Answer 1

[Serj-One]

www.owlcarousel.owlgraphic.com/docs/api-events.html

function callback(event) {
    // Provided by the core
    var element   = event.target;         // DOM element, in this example .owl-carousel
    var name      = event.type;           // Name of the event, in this example dragged
    var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index;     // Position of the current item
    // Provided by the navigation plugin
    var pages     = event.page.count;     // Number of pages
    var page      = event.page.index;     // Position of the current page
    var size      = event.page.size;      // Number of items per page
}

Comments

[ligisayan]

Serj-One отсылка понятна, но на какой параметр вешать и как можно это вывести в html? вот так, например, console.log ничего не выводит...

owl.owlCarousel({
    loop: true,
    items:1,
    margin: 10,
    nav: true,
    onDragged : callback
});

function callback() {
	var items = event.items.count;
  var item = event.item.index;
  console.log(items,item);
}

Answer 2

[ligisayan]

почти получилось вот так, единственно что при переходе с последнего слайда на первый отображает порядковый номер 8, а затем 2,3 и т.д.

Answer 3

[Антон]

Корректно выводит номер текущего слайда и количество общих слайдов при зацикленной карусели loop: true. Протестировано в версии Owl Carousel 2.3.4.
Вариант не самый лучший. Отсчёт начинается не с начала.

$carousel.on('initialized.owl.carousel changed.owl.carousel', function(event) {
  var $menuCounterThis = $('.counter__this'), // Контейнер вывода текущего слайда
      $menuCounterTotal = $('.counter__total'), // Контейнер вывода общего количества слайдов
      menuCloned = $( this ).find( '.cloned' ).length, // Количество клонированных элементов
      menuIndex = event.item.index, // Номер текущего слайда
      menuCount = event.item.count; // Общее количество слайдов (без клонированных)
  if ( menuIndex > menuCount ) {
      $menuCounterThis.text( menuIndex - menuCloned + ( menuCloned - menuCount )   );
  } else {
      $menuCounterThis.text( menuIndex );
  }
  $menuCounterTotal.text( menuCount );
});