In Owl carousel 1 I could specify different number of items to be shown depending on the viewport width:

items:5,
itemsDesktop:[1199,4],
itemsDesktopSmall:[979,3],
itemsTablet:[768,2],
itemsMobile:[479,1]

However, the code above doesn't work with Owl carousel 2. Also the specs suggest the only option to use:

items: 3 // or any ther number here

So it's the same number of items shown on mobile and desktop. Did I miss something?

In Owl carousel 1 I could specify different number of items to be shown depending on the viewport width:

items:5,
itemsDesktop:[1199,4],
itemsDesktopSmall:[979,3],
itemsTablet:[768,2],
itemsMobile:[479,1]

However, the code above doesn't work with Owl carousel 2. Also the specs suggest the only option to use:

items: 3 // or any ther number here

So it's the same number of items shown on mobile and desktop. Did I miss something?

• javascript
• jquery
• css
• owl-carousel
• owl-carousel-2

Share Improve this question Follow asked Feb 27, 2017 at 11:06 sdvnksvsdvnksv 9,7381919 gold badges6464 silver badges119119 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Try using the responsive option. Read here in the docs: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

On this thread hvsh is giving an example right at the bottom: https://github./OwlCarousel2/OwlCarousel2/issues/1363

Also on the demo page they give an example: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

Ok Nijland showed the links. I give you an example if e.g the links are no longer available: I consider that the owlcarousel plugin has been imported: In the plugin (mine is 2.2.2) you have something like this at lines 170 to 200:

Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,

[....]

margin: 20,
stagePadding: 0,

merge: false,
mergeFit: true,
autoWidth: false,

[....]
};

but I suggest you don't use those parameters, make a new script file where you can instantiate its functions. I would do something like this (Partners slider is one of the classes that I use to output my slider here. And the responsive option is for the amount of items you want to set in relation to the screen size):

function initPartnersSlider(){
if($('.partners_slider').length)
{
    var partnersSlider = $('.partners_slider');
    partnersSlider.owlCarousel(
    {
        loop:true,
        autoplay:true,
        smartSpeed:1200,
        nav:false,
        dots:true,
        responsive:
        {
            0:
            {
                items:1
            },
            720:
            {
                items:2
            },
            1199:
            {
                items:4
            }
        }
    });
}
}

there are several other options that we can set with this function (slider speed, etc). There is also the docs that help understand this. Hope this helps you. You have yourself a nice day sir