时间戳

首页 > 解决方案 > Owl carousel 2 不显示具有不同类名的正确项目

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

问题描述

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

<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。看起来，它正在从第一个脚本中读取所有内容。

标签： itemsclassnameowl-carousel-2

解决方案

在第二个滑块中，您提到items: 2的屏幕宽度大于 685 像素。所以只显示了两个项目。添加一些其他断点并生成items: 3. 在这个片段中，我将断点添加为 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 }
  }
});

推荐阅读