Multiple Owl Carousel 2 Sync Two Sliders

by Max Belov

HTML

<h1>Multiple corresponding interacting OWL-Carousels</h1>
<div class="gallery">
  <div class="owl-1">
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
  </div>

  <div class="owl-2">
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div class="thumb"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
  </div>
</div>

<div class="gallery">
  <div class="owl-1">
    <div class="img"><img src="https://dpv2tfe9gytwq.cloudfront.net/cs/products/27/33/16/1000x1000_1171x10x3918x2764.jpg" alt=""></div>
    <div...

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,400i,700,900");
body, html {
  font-family: "Lato", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.gallery {
  padding: 1em;
  max-width: 320px;
}

/* owl styling */
.owl-stage-outer {
  overflow: hidden;
}

.owl-stage {
  display: flex;
}

.disabled {
  display: none;
}

.owl-2 .owl-item {
  border: 2px solid transparent;
}
.owl-2 .current {
  border: 2px solid red;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  console.log("start");
  let galleries = document.querySelectorAll(".gallery");

  Array.prototype.forEach.call(galleries, function(el, i) {
    const $this = $(el);
    const $owl1 = $this.find(".owl-1");
    const $owl2 = $this.find(".owl-2");
    let flag = false;
    let duration = 300;

    $owl1
      .owlCarousel({
        items: 1,
        lazyLoad: false,
        loop: false,
        margin: 10,
        nav: false,
        responsiveClass: true
      })
      .on("changed.owl.carousel", function(e) {
        if (!flag) {
          flag = true;
          $owl2
            .find(".owl-item")
            .removeClass("current")
            .eq(e.item.index)
            .addClass("current");
          if ($owl2.find(".owl-item").eq(e.item.index).hasClass("active")) {} else {
            $owl2.trigger("to.owl.carousel", [e.item.index, duration, true]);
          }
          flag = false;
        }
      });

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