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

I am trying to use two owl carousels on my page but i cannt. Gif: https://gyazo.com/51620bc2fa6183bdcaab511632e1eb57

the first one is working perfectly (the one in the top on the gif)

but the second one (the one below on the gif) is not working. It is set to show 4 images instead of the 2 I set. I don't know what to do

This one is working well:

<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>

But this one is not working well:

   <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 Menu:

<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;
}

CodePudding user response：

Both scripts with which you run the carousel are looking for a block with a class ".owl-carousel" and find them both. So, we have conflict. Both carousels initialized by every script snippets, but with diferent options. You must be better - add diferent ID to every carousel and inintialize them separately (individually):

<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>