CODEWITHSUNDEEP
javascriptjqueryowl-carousel
stackgk
stackgk

Reputation: 137

Owl Carousel 2 - how to get a current item?

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

Upvotes: 10

Views: 32222

Answers (4)

Disapamok
Disapamok

Reputation: 1475

This

owl.on('changed.owl.carousel', function (e) { // });

Did not work for me, It returned an invalid index. I had only 3 slides but it returned index 4. So I captured the active slide with jQuery and added HTML attribute to content to get an id of the current active element.

Then I filtered my JSON array by that ID. I might not helpful just a workaround. And my code works fine.

You can get the function trigger by the owl event.

var itemID = jQuery('#owl-parent').find(".owl-item.active").find('.item-content').data('itemid');

Note: It is not returning the correct ID because the owl animations are in progress. You can add a timeout and get the activated slide.

Upvotes: 0

atilkan
atilkan

Reputation: 5056

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

Upvotes: 13

Ana Vivas
Ana Vivas

Reputation: 81

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

Upvotes: 8

alib0ng0
alib0ng0

Reputation: 470

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

Upvotes: 1

Related Questions