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')将使用相同的参数来启动滑块，因为您在两个轮播中都有该类

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

Answer 2

由于在同一Div Owl插件中具有“推荐”和“猫头鹰轮播”类，因此它们同时启动。

您既可以维护两个单独的Div来进行轮播初始化，也可以使用$（'。owl-carousel：not（“。testimonials”）'）。owlCarousel（{}）来启动轮播之一。或$（'。testimonials：not（“。owl-carousel”）'）。owlCarousel（{}）;

Answer 3

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

猫头鹰轮播不适用于其他类别

3 个答案: