10

I am working on a web site with Owl Carousel 2. I just want to detect which item is displayed on the front.

It used to be like this. http://owlgraphic.com/owlcarousel/demos/owlStatus.html

$(document).ready(function() {

  var owl = $("#owl-demo"),
      status = $("#owlStatus");

  owl.owlCarousel({
    navigation : true,
    afterAction : afterAction
  });

  function updateResult(pos,value){
    status.find(pos).find(".result").text(value);
  }

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

But it is an example of version 1. In version 2, the above doesn't work, and it seems that we should use "info" according to the official document. http://owlcarousel.owlgraphic.com/docs/api-options.html#info

I tried to figure out it, but there are no extra example or documents. I also went through the .js file, but couldn't get it. I wonder if the "info" is not implemented yet.

I don't really want to know about info, but just want to get data of current item.

I also tried this way below, but it doesn't work correctly. Do you have any possible solutions?

var active = $("#owl-demo").find(".owl-item.active");
console.log(active.text());
stackgk
  • 137
  • 1
  • 1
  • 7
  • 1
    Use version 1. Verison 2 is buggy and docs are counterintuitive. And mainteiner does not care anymore apparently. There are 500+ open issues. Version 2 is not only sucks. It blocked version 1 too. – atilkan May 29 '17 at 18:38

3 Answers3

13

I could not leave here without answering. You do it like this. I could not find it in docs too. I dived into source code.

owl.on('changed.owl.carousel', function (e) {
    console.log("current: ",e.relatedTarget.current())
    console.log("current: ",e.item.index) //same
    console.log("total: ",e.item.count)   //total
})

More Info: If you want this events to trigger initial state. You should add them before initialising owl. Like this.

var owl = $("#yourItem")
owl.on('changed.owl.carousel', function (e) {
    console.log("current: ",e.relatedTarget.current())
    console.log("current: ",e.item.index) //same
    console.log("total: ",e.item.count)   //total
})
// then init
owl.owlCarousel({settings})
atilkan
  • 4,527
  • 1
  • 30
  • 35
8
var owl = $("#yourItem")
owl.on('changed.owl.carousel', function (e) {
    $('.current').text(e.relatedTarget.relative(e.relatedTarget.current()) + 1);
    $('.allitems').text(e.item.count);
})
// then init
owl.owlCarousel({settings})
Ana Vivas
  • 81
  • 1
  • 2
  • 1
    Hi, @Ana Vivas. While your code is great, it would be better if you could add some context to it, such as what each part of the code does, just so everybody can understand the code and not just merely copy-paste. Have a nice day! – amodrono Jan 27 '20 at 22:39
1
owl.on('changed.owl.carousel', function (e) {
    //console.log("current: ",e.item.index) //same
    if (("current: ",e.item.index == 0)){
        console.log("page01");
    } 
    if (("current: ",e.item.index == 1)){
        console.log("page02");
    }                  
})
alib0ng0
  • 459
  • 1
  • 5
  • 15