Owl Carousel 2 - how to get a current item?

Question

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

Answer 1

I could not leave here without answering. You do it like this. I could not find it in docs too. I dived into spagetti 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})