L
L
ligisayan2016-04-21 11:12:49
JavaScript
ligisayan, 2016-04-21 11:12:49

How to find number and number of slides in owl carousel 2 carousel?

Hello! There is a carousel Owl Carousel 2 in which I want to get the number of the current slide and the number of all slides (instead of 1 and N) - how can I do this?
Working fidl

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

I draw your attention to the fact that there can be a different number of slides (we do not focus on the count of slides in html ) and the carousel is looped to infinity, i.e. number of slides in source code and html do not match (there are cloned slides)

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Serj-One, 2016-04-21
@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
}

L
ligisayan, 2016-04-21
@ligisayan

it almost turned out like this , the only thing is that when you switch from the last slide to the first, it displays the serial number 8, and then 2.3, etc.
acc6bf82cb81.png

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question