Owl Carousel 2.2.1 Synced thumbnail carousels

Demo with loop: true linked carousel thumbnail gallery

by Max Belov

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<script src="https://cdn.bootcss.com/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<div class="sync">
  <div id="sync1" class="slider owl-carousel">
    <div class="item">
      <h1>1</h1>
    </div>
    <div class="item">
      <h1>2</h1>
    </div>
    <div class="item">
      <h1>3</h1>
    </div>
    <div class="item">
      <h1>4</h1>
    </div>
    <div class="item">
      <h1>5</h1>
    </div>
    <div class="item">
      <h1>6</h1>
    </div>
    <div class="item">
      <h1>7</h1>
    </div>
  </div>
  <div id="sync2" class="navigation-thumbs owl-carousel">
    <div class="item">
      <h1>1</h1>
    </div>
    <div class="item">
      <h1>2</h1>
    </div>
    <div class="item">
      <h1>3</h1>
    </div>
    <div class="item">
      <h1>4</h1>
    </div>
    <div class="item">
      <h1>5</h1>
    </div>
    <div class="item">
      <h1>6</h1>
    </div>
    <div class="item">
      <h1>7</h1>
    </div>
  </div>
</div>
<div class="sync">
  <div id="sync3" class="slider owl-carousel">
    <div class="item">
      <h1>1</h1>
    </div>
    <div class="item">
      <h1>2</h1>
    </div>
    <div class="item">
      <h1>3</h1>
    </div>
    <div class="item">
      <h1>4</h1>
    </div>
    <div class="item">
      <h1>5</h1>
    </div>
    <div class="item">
      <h1>6</h1>
    </div>
    <div class="item">
      <h1>7</h1>
    </div>
  </div>
  <div id="sync4" class="navigation-thumbs owl-carousel">
    <div class="item">
      <h1>1</h1>
    </div>
    <div class="item">
      <h1>2</h1>
    </div>
    <div class="item">
      <h1>3</h1>
    </div>
    <div class="item">
      <h1>4</h1>
    </div>
    <div class="item">
      <h1>5</h1>
    </div>
    <div class="item">
      <h1>6</h1>
    </div>
    <div class="item">
      <h1>7</h1>
    </div>
 ...

CSS

.sync .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.sync .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
.sync.item h1{
  font-size: 18px;
}
.sync .synced .item{
  background: #0c83e7;
}

JavaScript

$('.sync').each(function() {
  (function(_e) {
    var sync1 = $(_e).find(".slider");
    var sync2 = $(_e).find(".navigation-thumbs");

    var thumbnailItemClass = '.owl-item';

    var slides = sync1.owlCarousel({
      video: true,
      startPosition: 12,
      items: 1,
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 6000,
      autoplayHoverPause: false,
      nav: false,
      dots: true
    }).on('changed.owl.carousel', syncPosition);

    function syncPosition(el) {
      $owl_slider = $(this).data('owl.carousel');
      var loop = $owl_slider.options.loop;

      if (loop) {
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
        if (current < 0) {
          current = count;
        }
        if (current > count) {
          current = 0;
        }
      } else {
        var current = el.item.index;
      }

      var owl_thumbnail = sync2.data('owl.carousel');
      var itemClass = "." + owl_thumbnail.options.itemClass;


      var thumbnailCurrentItem = sync2
        .find(itemClass)
        .removeClass("synced")
        .eq(current);

      thumbnailCurrentItem.addClass('synced');

      if (!thumbnailCurrentItem.hasClass('active')) {
        var duration = 300;
        sync2.trigger('to.owl.carousel', [current, duration, true]);
      }
    }
    var thumbs = sync2.owlCarousel({
        startPosition: 12,
        items: 4,
        loop: false,
        margin: 10,
        autoplay: false,
        nav: false,
        dots: false,
        onInitialized: function(e) {
          var thumbnailCurrentItem = $(e.target).find(thumbnailItemClass).eq(this._current);
          thumbnailCurrentItem.addClass('synced');
        },
      })
      .on('click', thumbnailItemClass, function(e) {
        e.preventDefault();
        var duration = 300;
        var itemIndex = $(e.target).parents(thumbnailItemClass).index();
        sync1.trigger('to.owl.carousel',...