CODEWITHSUNDEEP
javascriptowl-carousel
mastercheef85
mastercheef85

Reputation: 2269

Owl carousel 2 get visible elements

How can I get the visible items of an Owl Carousel 2?

On the Owl Carousel 1, I was able to get it with:

jQuery('#my-carousel').data('OwlCarousel').visibleItems;

But that doesn't work anymore. Even the data calling has changed to ('owl.carousel'), that's what I already figured out.

I took the example from the Owl Carousel 1 Documentation and adjusted the parts for the new Version: http://owlgraphic.com/owlcarousel/demos/sync.html

I have all, just the part of the visible elements is still a problem.

I tried several things but I wasn't able to get visible elements.

Has anyone an idea?

Upvotes: 1

Views: 4353

Answers (3)

Rottmayer
Rottmayer

Reputation: 16

in the options set center:true. This adds class center to visible and active slider item. Then you can easily select it with .center selector

Upvotes: 0

atilkan
atilkan

Reputation: 5018

I strongly recommend you using version 1. But here is answer anyways. You do it like this for owl 2:

owl.on('changed.owl.carousel', function (e) {
   console.log(": ", e.relatedTarget.settings.items)
})

If you want to trigger on page load add event before initialising. Like this.

var owl = $('#yourDiv')
owl.on('changed.owl.carousel', function (e) {
   //console.log("vis: ", e.property.value.items) // don't use this.
   console.log("vis: ", e.relatedTarget.settings.items)
})
owl.owlCarousel({settings})

Edit: Sorry. This only works initially. Because initial type of e.property.value is Object. But later it is integer. Javascript right. I will update if i find solution.

Update: I updated answer. It works now.

Upvotes: -1

Brett Donald
Brett Donald

Reputation: 14122

It seems that the visible items have the css classes "owl-item" and "active", so use $("#my-carousel .owl-item.active") to get an array of jQuery objects, and $("#my-carousel .owl-item.active").get() to get an array of DOM objects.

Upvotes: 4

Related Questions