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

Question

I am trying to use two owl carousels on my page but I can't.

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

score 0 · Accepted Answer · answered Oct 01 '21 at 19:45

0

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>

answered Oct 01 '21 at 19:45

Aleksandr Abramov

501
1
5
10

Hello, thank you but still it is not working :( – Rodrigo Oct 01 '21 at 20:55
I edited my post (it was a little confusing) I think now its better – Rodrigo Oct 01 '21 at 21:15
1

Edit: ITS WORKING!!! we forgot the ''owl-'' in the ''$("#carousel-1").owlCarousel({'' Thank you very much Aleksandr !! – Rodrigo Oct 01 '21 at 22:14

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

1 Answers1