猫头鹰轮播2缩略图作为轮播

Question

我已成功同步2个轮播，其中之一带有缩略图。一切都同步良好并且可以正常工作，但是缩略图列表很大，并且形成了多行拇指网格。我希望缩略图本身可以作为轮播显示-意味着它们只是单个滚动行，而不是多个滚动行。

有人知道该怎么做吗？

var sync1 = jQuery('#sync2'),
  sync2 = jQuery('#sync1');

sync1.on('click', '.owl-next', function() {
  sync2.trigger('next.owl.carousel')
});
sync1.on('click', '.owl-prev', function() {
  sync2.trigger('prev.owl.carousel')
});

sync1.owlCarousel({
  center: true,
  loop: true,
  items: 1,
  margin: 0,
  nav: true,
  mouseDrag: false,
  dots: false,
  touchDrag: false,
  navText: ['<i class="fas fa-caret-left"></i>', '<i class="fas fa-caret-right"></i>'],
  autoHeight: true
});

sync2.owlCarousel({
  center: true,
  loop: true,
  items: 1,
  margin: 10,
  nav: false,
  thumbs: true,
  mouseDrag: false,
  dots: false,
  touchDrag: false,
  thumbsPrerendered: true,
  autoHeight: true
});

.item {
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/owl.carousel@2.3.4/dist/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<div id="sync1" class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>



<div id="sync2" class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>