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