Owl Carousel 2 Thumbnails в слайдере

<div class="outer">
<div id="big" class="owl-carousel owl-theme">
  <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 class="item"><h1>8</h1></div>
</div>
<div id="thumbs" class="owl-carousel owl-theme">
  <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 class="item"><h1>8</h1></div>
</div>
</div>

$(document).ready(function() {
  var bigimage = $("#big");
  var thumbs = $("#thumbs");
  //var totalslides = 10;
  var syncedSecondary = true;
 
  bigimage.owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: true,
    autoplay: false,
    dots: false,
    loop: false,
    responsiveRefreshRate: 200
  }).on("changed.owl.carousel", syncPosition);
 
  thumbs.on("initialized.owl.carousel", function() {
    thumbs.find(".owl-item").eq(0).addClass("current");
  }).owlCarousel({
    items: 4,
    dots: false,
    nav: false,
    smartSpeed: 200,
    slideSpeed: 500,
    slideBy: 4,
    responsiveRefreshRate: 100
  }).on("changed.owl.carousel", syncPosition2);
 
  function syncPosition(el) {
    //если для loop задано значение false, вам необходимо раскомментировать следующую строку
    var current = el.item.index;
 
    //чтобы отключить loop, прокомментируйте этот блок а следующий нужно раскомментировать
    var count = el.item.count - 1;
    //var current = Math.round(el.item.index - el.item.count / 2 - 0.5);
 
    if (current < 0) {
      current = count;
    }
    if (current > count) {
      current = 0;
    }
    //к этому
    thumbs
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = thumbs.find(".owl-item.active").length - 1;
    var start = thumbs
      .find(".owl-item.active")
      .first()
      .index();
    var end = thumbs
      .find(".owl-item.active")
      .last()
      .index();
 
    if (current > end) {
      thumbs.data("owl.carousel").to(current, 100, true);
    }
    if (current < start) {
      thumbs.data("owl.carousel").to(current - onscreen, 100, true);
    }
  }
 
  function syncPosition2(el) {
    if (syncedSecondary) {
      var number = el.item.index;
      bigimage.data("owl.carousel").to(number, 100, true);
    }
  }
 
  thumbs.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = $(this).index();
    bigimage.data("owl.carousel").to(number, 300, true);
  });
});