如何为页面中多个Owl Carousel轮播区块设置不同的同时展示项数

你当前的写法是统一选中所有.owl-carousel元素应用相同配置，自然所有轮播的参数都一致，可通过以下两种方式实现不同区块差异化配置：

方法1：按独立选择器分开初始化 #

给不同的轮播区块添加唯一的类名/ID做区分，分别调用初始化方法：

调整HTML结构 #

<!-- 单次展示2项的轮播 -->
<div class="owl-carousel carousel-2items">
  <!-- 轮播项内容 -->
</div>

<!-- 单次展示4项的轮播 -->
<div class="owl-carousel carousel-4items">
  <!-- 轮播项内容 -->
</div>

调整JS初始化代码 #

$(document).ready(function(){
    // 初始化2项轮播
    $(".carousel-2items").owlCarousel({
        items: 2,
        slideBy: 2
    });
    // 初始化4项轮播
    $(".carousel-4items").owlCarousel({
        items: 4,
        slideBy: 4
    });
});

方法2：通过自定义data属性动态读取配置（更易扩展） #

如果后续可能新增更多不同配置的轮播，可直接将配置参数写在HTML的data属性中，初始化时自动读取每个轮播的专属配置：

调整HTML结构 #

<!-- 单次展示2项的轮播 -->
<div class="owl-carousel" data-items="2" data-slide-by="2">
  <!-- 轮播项内容 -->
</div>

<!-- 单次展示4项的轮播 -->
<div class="owl-carousel" data-items="4" data-slide-by="4">
  <!-- 轮播项内容 -->
</div>

调整JS初始化代码 #

$(document).ready(function(){
    $(".owl-carousel").each(function(){
        const $this = $(this);
        $this.owlCarousel({
            items: $this.data('items'),
            slideBy: $this.data('slide-by')
            // 其余通用配置可以统一写在这里
        });
    });
});

两种方案都可以实现需求，仅2种固定轮播样式选第一种更直观，后续轮播类型多的话选第二种维护成本更低。

内容的提问来源于stack exchange，提问作者PapT