猫头鹰旋转木马不适用于不同的班级答案

【问题标题】：Owl Carousel not working with different classes猫头鹰旋转木马不适用于不同的班级
【发布时间】：2018-10-23 07:49:04
【问题描述】：

所以我正在制作一个网站，我需要更多的滑块，具有不同的类，以便我可以自定义它们，例如在滑块上将显示 3 个幻灯片，另一个将只显示一个。

这是其中之一的代码：

<div class="testimonials owl-carousel owl-theme owl-loaded">
  <div class="owl-stage-outer">
    <div class="owl-stage">
      <div class="owl-item">
        <div class="s__t__card">
          Distinctively myocardinate adaptive action items without high-quality initiatives. Holisticly envisioneer web-enabled methodologies with integrated relationships. Energistically engage covalent action items whereas customer directed technology. Interactively customize stand-alone services via reliable results.a
        </div>
      </div>
    </div>
  </div>
</div>

jQuery:

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 30,  
nav: false,
dots: false,
autoplay: true,
autoplaySpeed: 2000,
autoplayTimeout: 4000,
responsive: {
  1000: {
    items: 3,
  }
}});
  $('.testimonials').owlCarousel({
loop: true,
margin: 30,  
nav: false,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
autoplayTimeout: 4000,
responsive: {
  1000: {
    items: 1,
  }
}});});

Here is what it does

显示的是 3 张幻灯片而不是 1 张，请帮忙！

【问题讨论】：

标签： jquery owl-carousel-2

【解决方案1】：

$('.owl-carousel') 将使用相同的参数启动滑块，因为您在两个轮播中都有类

将$('.owl-carousel') 更改为$('.owl-carousel:not(".testimonials")') 或从第二个轮播中删除owl-carousel 类

【讨论】：

我在 '$('owl-carousel')' 中添加了 ':not(".testimonials")'，但只有功能 'items' 有效，'nav'、'dots' 和其他根本不适用于“.testimonials”

【解决方案2】：

由于您在同一个 Div 中有“推荐”和“owl-carousel”类，所以 Owl 插件同时启动两者。

您可以为轮播初始化维护两个单独的 Div，或者使用 $('.owl-carousel:not(".testimonials")').owlCarousel({});或 $('.testimonials:not(".owl-carousel")').owlCarousel({});

【讨论】：

我在 '$('owl-carousel')' 中添加了 ':not(".testimonials")'，但只有功能 'items' 有效，'nav'、'dots' 等根本不适用于“.testimonials”

【解决方案3】：

基本上问题是我试图更改$('.owl-carousel).owlCarousel({}) 中的轮播设置，但我必须在轮播的第二类中进行，例如我所做的第一个轮播有“功能”类，所以我将我的第一个 $('.owl-carousel).owlCarousel({}) 更改为 $('.features').owlCarousel({})

【讨论】：