Owl 轮播不能与不同的类

Question

所以我正在制作一个网站，我需要更多的滑块，具有不同的类以便我可以自定义它们，例如滑块将显示 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 张，请帮忙！

Answer 1

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

中都有 class

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

Answer 2

因为您有 "testimonials" 和 "owl-carousel" 类在同一 Div Owl 插件同时启动两者。

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

Answer 3

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

Owl 轮播不能与不同的类

Owl Carousel not working with different classes

jquery

owl-carousel-2

Owl 轮播不能与不同的 类

Owl Carousel not working with different classes

jquery

owl-carousel-2

Owl 轮播不能与不同的类