How do you access the current properties of an OwlCarousel?

Question

I need to get the current number of items shown in an OwlCarousel. eg: the number that is set with the {items: n} setting. In this case using the responsive directive.

{
  items: 4,
  responsive: {
     720: {
         items: 3
     },
     320: {
         items: 2
     }
  }
}

Something like this I expect

var owl = $('.carousel').data('owl.carousel');
var current_items = owl.settings.items;

I would like to programmatically determine how many items are currently being shown at once.

which owl carousel are you using? version 1.x or 2? – Cerlin Apr 22 '15 at 06:12 — Cerlin, Apr 22 '15 at 06:12
Version 2 (as per the tag). – Queenvictoria Apr 22 '15 at 06:29 — Queenvictoria, Apr 22 '15 at 06:29

score 1 · Answer 1 · answered Apr 22 '15 at 06:14

1

you can use the below to get the number of active items

$('.owl-carousel .owl-item.active').length

answered Apr 22 '15 at 06:14

Cerlin

6,622
1
20
28

That looks good in answering my specific case (current items) but not the question posed by the title (current properties) which can be accessed directly via settings. – Queenvictoria Apr 22 '15 at 06:28

score 1 · Accepted Answer · edited May 23 '17 at 11:47

Ok looks like this is quite straight forward after all. You can also watch for properties changing (as in the answer to this question). Looks like I just had the .data() selector incorrect.

// Grab your carousel
var carousel = $('.carousel').data('owlCarousel');
var current_items;
// Check that it already exists
if ( carousel ) {
  // Access it's settings property - "items" is updated 
  // when the breakpoint changes
  current_items = carousel.settings.items;
}

score 0 · Answer 3 · answered Apr 22 '15 at 06:22

0

you can get by this :

   var totalItems = $('.owl-item.active').length;

   alert(totalItems);

answered Apr 22 '15 at 06:22

Chirag Shah

1,463
2
18
40

That would be all the items in the carousel not the number shown I think. And is the `.item` class correct for version two? – Queenvictoria Apr 22 '15 at 06:27

How do you access the current properties of an OwlCarousel?

3 Answers3