Owl carousel 2 不显示具有不同类名的正确项目答案

【问题标题】：Owl carousel 2 does not display the correct items with different class nameOwl carousel 2 不显示具有不同类名的正确项目
【发布时间】：2020-08-15 00:38:24
【问题描述】：

我看到这个问题已经被问过了，但解决方案对我不起作用。我的系统中有这些项目：

<div class="owl-carousel">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

<div class="blog-carousel owl-carousel">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

脚本方面：

$(".owl-carousel").owlCarousel({
    items: 2,
    responsiveClass:true,
    responsive: {
        0: { items: 1 },
        685: { items: 2 },
    }
});

$('.blog-carousel:not(".owl-carousel")').owlCarousel({
    items: 3,
    responsiveClass:true,
    responsive: {
        0: { items: 1 },
        685: { items: 2 }
    }
});

起初，在第二个 div 组上，我只将blog-carousel 作为类名，简单地调用$('.blog-carousel').owlCarousel({})，但无法在轮播中显示。然后我看到其他人提到类名“owl-carousel”是强制性的。这就是我的代码变成这个的方式。

所以问题是，默认的 owl-carousel，我只想显示 2 个项目并为博客组显示 3 个项目。但是我的博客项目仍然显示 2 而不是 3。看起来，它正在读取第一个脚本中的所有内容。

【问题讨论】：

标签： items classname owl-carousel-2

【解决方案1】：

在您提到的第二个滑块中，items: 2 屏幕宽度大于 685 像素。所以只显示了两个项目。添加一些其他断点并设置items: 3。在这个 sn-p 中，我添加了断点为 768px。

$('.blog-carousel').owlCarousel({
  responsiveClass:true,
  responsive: {
    // breakpoint from 0 up
    0: { items: 1 },
    // breakpoint from 685 up
    685: { items: 2 },
    // breakpoint from 768 up
    768: { items: 3 }
  }
});

【讨论】：