文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Owl carousel中显示多个项目？

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

Stack Overflow用户

提问于 2021-10-18 06:20:09

回答 2查看 199关注 0票数 0

我在我的页面上使用了Owl carousel。我需要在多个部分中使用它，但每个部分都有不同的旋转木马设计。

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

在我的js文件中，我像这样初始化了carousel：

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

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

谢谢

jquery

owl-carousel

回答 2

Stack Overflow用户

发布于 2021-10-18 10:39:55

默认样式为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
);

票数 1

Stack Overflow用户

发布于 2021-10-18 06:43:11

您必须更改所有转盘的不同调用，并将它们分别分配给eaxample

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

像first这样的jquery：

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

第二：

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

第三：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69611556

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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