How do I show multiple items in Owl carousel?-CodePudding

I'm using Owl carousel on my page. I need to use it in more than one section, but each section comes with different carousel design.

In my first carousel section I need to display two items at a time, but in the other section I need to display 4 items at a time.

In my js file I initialize the carousel like this:

$(document).ready(function(){
    $(".owl-carousel").owlCarousel(
        {
            items: 2,
            slideBy: 2
        }
    );
});

But if I do this then I can only show 2 items in each section. Is there a way to somehow change the items, depending on the sections?

Thanks

CodePudding user response：

you have to change the all carousel calss different and assign them seprate for eaxample

<div class = "owl-carousel"> </div>
<div class = "owl-carousel-second"> </div>
<div class = "owl-carousel-third"> </div>

and jquery like first:

$(".owl-carousel").owlCarousel(
        {
            items: 2,
            slideBy: 2
        }
    );

second:

$(".owl-carousel-second").owlCarousel(
        {
            items: 3,
            slideBy: 2
        }
    );

third:

$(".owl-carousel-third").owlCarousel(
        {
            items: 4,
            slideBy: 2
        }
    );

CodePudding user response：

owl-carousel and owl-theme for default style. And you can write for carousels like this

<div class="owl-carousel owl-theme first-slider></div>
<div language-xml"><div class="owl-carousel owl-theme third-slider></div>

$(".first-slider").owlCarousel(
  //owl setting
);

$(".second-slider").owlCarousel(
  //owl setting
);

$(".third-slider").owlCarousel(
  //owl setting
);