CODEWITHSUNDEEP
javascriptjquerycssowl-carouselowl-carousel-2
sdvnksv
sdvnksv

Reputation: 9668

How do I specify number of items to be shown in Owl carousel 2?

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?

Upvotes: 2

Views: 11561

Answers (2)

Andy McRae
Andy McRae

Reputation: 665

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

Upvotes: 0

Niek Nijland
Niek Nijland

Reputation: 772

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.com/OwlCarousel2/OwlCarousel2/issues/1363

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

Upvotes: 2

Related Questions