在单个页面上使用两个 (owl) 轮播不起作用

Question

我想在我的页面上使用两个 owl 轮播，但我不能。

动图：https://gyazo.com/51620bc2fa6183bdcaab511632e1eb57

第一个运行良好（gif 顶部的那个）

但是第二个（gif 下方的那个）不起作用。它设置为显示 4 张图像，而不是我设置的 2 张。我不知道该怎么办

这个效果很好：

<body>

<!-- MENU-->
<section>
  <div class="owl-carousel owl-theme">
    <div class="item">
      <img src="img/image1.jpg">
    </div>
    <div class="item">
      <img src="img/image2.jpg">
    </div>
    <div class="item">
      <img src="img/image3.jpg">
    </div>
    <div class="item">
      <img src="img/image4.jpg">
    </div>
    <div class="item">
      <img src="img/image5.jpg">
    </div>
    <div class="item">
      <img src="img/image6.jpg">
    </div>
    <div class="item">
      <img src="img/image7.jpg">
    </div>
    <div class="item">
      <img src="img/image8.jpg">
    </div>
    <div class="item">
      <img src="img/image9.jpg">
    </div>
  </div>


  <!--script MENU-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel({
        loop:true,
        responsive: {
          0 : {
            items : 1
          },
          600 : {
            items : 2
          },
          1200 : {
            items : 4
          }
        },
        autoplay: true,
        autoplayTimeout: 1500
      });
    })
  </script>
 </section>

但是这个效果不佳：

   <header>

  <div class="owl-carousel owl-theme">
    <div class="item"><img src="/img/Group 1.jpg"  alt="slide1" /></div>
     <div class="item"><img src="/img/Group 2.jpg" alt="slide1" /></div>
  </div>

  <script>
    $('.owl-carousel').owlCarousel({
     loop:true,
     margin:0,
     nav:true,
   dots:true,
     responsive:{
         0:{
             items:1
         },
         600:{
             items:1
         },
         1000:{
             items:1
         }
     }
 })
</script>


<!--Script HEADER-->
 <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
 <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

 </header>

Href 菜单：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Href Header:

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

Css(header):

    *{ margin:0; padding:0; box-sizing:border-box}
body {
  background-color: #fff;
}


.item img{ height:450px; width:100%; object-fit:cover}
.owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 100%;
}
.owl-nav button {
    background: #fff !important;
    width: 50px;
    height: 50px;
    display: block
}
.owl-nav button.owl-next {
    float: right;
}
.owl-nav button.owl-prev {
    float: left;
}
.owl-dots {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
}

Answer 1

您运行旋转木马的两个脚本都在寻找带有 class ".owl-旋转木马" 的块，并找到它们。所以，我们有冲突。两个轮播都由每个脚本片段初始化，但具有不同的选项。你必须更好 - 为每个轮播添加不同的 ID 并分别（单独）初始化它们：

<div id="carousel-1" class="owl-carousel owl-theme">
...
</div>
<div id="carousel-2" class="owl-carousel owl-theme">
...
</div>
<script>
$("#carousel-1").owlCarousel({
items: 4,
...
});
</script>
<script>
$("#carousel-2").owlCarousel({
items: 2,
...
});
</script>

在单个页面上使用两个 (owl) 轮播不起作用

Using two (owl) carousel on a single page is not working

html

css

owl-carousel

owl-carousel-2