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

Posted 2023-05-07

【中文标题】如何在 Owl carousel 中显示多个项目？

【英文标题】：How do I show multiple items in Owl carousel?

【发布时间】：2021-12-05 05:49:03

【问题描述】：

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

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

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

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

但如果我这样做，那么我只能在每个部分显示 2 个项目。有没有办法根据部分更改items？

谢谢

【参考方案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
);

【参考方案2】：

您必须更改所有轮播类，并将它们单独分配给示例

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

和 jquery 一样 第一：

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

秒：

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

第三个：

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

【讨论】：

谢谢，它有效。但它会弄乱默认的猫头鹰轮播样式。所以最好创建一个默认的owl css文件的副本并重命名它。 .owl-carousel 类也需要重命名为 .owl-carousel-second 或其他。据我所知，js 不受此影响。

看起来您正在使用自定义 css，因此您可以创建另一个通用类并将其分配给所有轮播