owl carousel - Set different items number for each of many sliders placed on the same page

Question

I have a page with multiple sliders that are created with owl carousel. I would like to define different number of visible items for each slider. The perfect solution would be to define number of visible items in HTML (as a class or data). I am just starting using jQuery so I only managed to pass a value using data attribute like this:

<div class="owl-carousel" data-itemsnumber="5">...</div>

Then I applied this value to a variable in JS and add this variable in settings instead of items number like this.

var slides = $('.owl-carousel').data('itemsnumber');
$(".owl-carousel").owlCarousel(
{
  items: slides
});

The above code is not working properly as value from first slider is applied to all sliders on page, and I need each of them to have different number of items. How can I achieve this?

Thanks in advance

Answer 1

There are some pre-defined options defined in owl-carousels:

• itemDesktop - for screen size 1400px(default) and above
• itemsDesktopSmall- for screen size 1100px(default) and above
• itemsTablet- for screen size 700px(default) and above
• itemsMobile- for screen size 500px(default) and above

You could use the above options to set how many items would be shown according to the screen width. some what like this:

 $(".owl-carousel-product").owlCarousel({
                                items: 3,
                                itemsDesktop: [1400, 3],//1400:screen size, 3: number if items in the slide
                                itemsDesktopSmall: [1100, 2],
                                itemsTablet: [700, 1],
                                itemsMobile: [500, 1]
                              });

Also if you are using the carousels for images, then images might overlap at different screens. so you could make the width of images 100% in your css file.