多个猫头鹰轮播大拇指

Question

我正在尝试使用多个猫头鹰轮播拇指，但是我们可以进行第一个工作，而第二个则不能。

是否可以通过班级激活轮播，并在同一页面上运行一堆轮播。我该如何解决？？

两个圆头的代码都相同，这就是html代码

     <pre>
           <div class=" gallery-bloc-thumb owl-carousel">
        <div class="item-gallery">
         <a href="assets/images/image1.png" >
          <img src="assets/images/image1.png">
        </a>
      </div>

      <div class="item-gallery">
       <a href="assets/images/image2.png" > 
         <img src="assets/images/image2.png">
       </a>
     </div>

     <div class="item-gallery">
       <a href="assets/images/image3.png">
        <img src="assets/images/image3.png">
      </a>
    </div>
    </div>
    <div class="gallery-thumb owl-carousel">
     <div class="item-gallery">
       <img src="assets/images/small-caroussel.jpg">
     </div>
     <div class="item-gallery">
       <img src="assets/images/small-caroussel.jpg">
     </div>
     <div class="item-gallery">
      <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
     <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
     <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
      <img src="assets/images/small-caroussel.jpg">
    </div>
    </div> 
      </pre>


and the js code

   <pre>
  const $gal1 = $(".gallery-bloc-thumb");
  const $gal2 = $(".gallery-thumb");
  let position = false;
  let duration = 300;

  $gal1
    .owlCarousel({
      items: 1,
      lazyLoad: false,
      loop: false,
      margin: 10,
      nav: false,
      responsiveClass: true
    })
    .on("changed.owl.carousel", function(e) {
      if (!position) {
        position = true;
        console.log(e.item.index);
        $gal2
          .find(".owl-item")
          .removeClass("current")
          .eq(e.item.index)
          .addClass("current");
        if (
          $gal2
            .find(".owl-item")
            .eq(e.item.index)
            .hasClass("active")
        ) {

        } else {
          $gal2.trigger("to.owl.carousel", [e.item.index, duration, true]);
        }
        position = false;
      }
    });

  $gal2
    .on("initialized.owl.carousel", function() {
      $gal2
        .find(".owl-item")
        .eq(0)
        .addClass("current");
    })
    .owlCarousel({
      items: 6,
      lazyLoad: false,
      loop: false,
      margin: 10,
      nav: false,
      responsiveClass: true
    })
    .on("click", ".owl-item", function(e) {
      e.preventDefault();
      var number = $(this).index();
      $gal1.trigger("to.owl.carousel", [number, duration, true]);
    });

</pre>