Synced owl Carousel with Thumbnails

by Torwan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<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 class="item">
      <h1>9</h1>
    </div>
    <div class="item">
      <h1>10</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 class="item">
      <h1>9</h1>
    </div>
    <div class="item">
      <h1>10</h1>
    </div>
  </div>
</div>

CSS

.outer {
  margin: 0 auto;
  max-width: 800px;
}

#big .item {
  background: #ec6e46;
  padding: 120px 0px;
  margin: 2px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
}

#thumbs .item {
  background: #C9C9C9;
  height: 70px;
  line-height: 70px;
  padding: 0px;
  margin: 2px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}

#thumbs .item h1 {
  font-size: 18px;
}

#thumbs .current .item {
  background: #FF5722;
}

.owl-theme .owl-nav [class*='owl-'] {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.owl-theme .owl-nav [class*='owl-'].disabled:hover {
  background-color: #D6D6D6;
}

#big.owl-theme {
  position: relative;
}

#big.owl-theme .owl-next,
#big.owl-theme .owl-prev {
  background: #333;
  width: 22px;
  line-height: 40px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
  top: 50%;
}

#big.owl-theme .owl-prev {
  left: 10px;
}

#big.owl-theme .owl-next {
  right: 10px;
}

#thumbs.owl-theme .owl-next,
#thumbs.owl-theme .owl-prev {
  background: #333;
}

JavaScript

$(document).ready(function() {
  var bigimage = $("#big");
  var thumbs = $("#thumbs");
  //var totalslides = 10;
  var syncedSecondary = true;

  bigimage
    .owlCarousel({
      items: 1,
      slideSpeed: 2000,
      nav: true,
      autoplay: true,
      dots: false,
      loop: true,
      responsiveRefreshRate: 200,
      navText: [
        '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
        '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
      ]
    })
    .on("changed.owl.carousel", syncPosition);

  thumbs
    .on("initialized.owl.carousel", function() {
      thumbs
        .find(".owl-item")
        .eq(0)
        .addClass("current");
    })
    .owlCarousel({
      items: 4,
      dots: true,
      nav: true,
      navText: [
        '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
        '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
      ],
      smartSpeed: 200,
      slideSpeed: 500,
      slideBy: 4,
      responsiveRefreshRate: 100
    })
    .on("changed.owl.carousel", syncPosition2);

  function syncPosition(el) {
    //if loop is set to false, then you have to uncomment the next line
    //var current = el.item.index;

    //to disable loop, comment this block
    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;
    }
    //to this
    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);
   ...