jquery - 如何在 Owl carousel 中显示多个项目？

Question

我在我的页面上使用 Owl 轮播。我需要在多个部分中使用它，但每个部分都有不同的轮播设计。

在我的第一个轮播部分，我需要一次显示两个项目，但在另一个部分，我需要一次显示 4 个项目。

在我的 js 文件中，我像这样初始化轮播：

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

但是如果我这样做，那么我只能在每个部分中显示 2 个项目。有没有办法以某种方式改变items，取决于部分？

谢谢

标签： jqueryowl-carousel

Answer 1

owl-carousel和owl-theme默认样式。你可以像这样为每个轮播写不同的类

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

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

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

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