如何修复多个猫头鹰轮播同步中的上一个按钮

Question

我正在尝试修复多个猫头鹰轮播上一个按钮/幻灯片，但失败。

当我单击上一个按钮时，它会转到第一张幻灯片（如果您转到第五张幻灯片）。

这是我的代码：

$(document).ready(function() {

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 4; //globaly define number of elements per page
  var syncedSecondary = true;

  sync1.owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: true,
    dots: false,
    loop: true,
    //    responsiveRefreshRate: 200,
    navText: [],
  }).on('changed.owl.carousel', syncPosition);

  sync2
    .on('initialized.owl.carousel', function() {
      sync2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
      items: slidesPerPage,
      dots: true,
      nav: false,
      smartSpeed: 200,
      slideSpeed: 500,
      slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
      responsiveRefreshRate: 100
    }).on('changed.owl.carousel', syncPosition2);

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

    //if you disable loop you have to comment this block
    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;
    }

    //end block

    sync2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();

    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }

  function syncPosition2(el) {
    if (syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }

  sync2.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
});

#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #FFF;
  text-align: center;
}

#sync2 {
  width: 100%;
  margin: auto;
}

#sync2 .item {
  background: #C9C9C9;
  padding: 10px 0px;
  margin: 5px;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

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

#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav {
  /*default owl-theme theme reset .disabled:hover links */
}

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

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

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

#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  background-color: red;
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}

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

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

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slider</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">


<div class="container-fluid">
  <div class="card p-4 mt-5">
    <div class="row">
      <div class="col-lg-12">
        <div id="sync1" 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 class="item">
            <h1>11</h1>
          </div>
          <div class="item">
            <h1>12</h1>
          </div>
          <div class="item">
            <h1>13</h1>
          </div>
          <div class="item">
            <h1>14</h1>
          </div>
          <div class="item">
            <h1>15</h1>
          </div>
          <div class="item">
            <h1>16</h1>
          </div>
        </div>

        <div id="sync2" 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 class="item">
            <h1>11</h1>
          </div>
          <div class="item">
            <h1>12</h1>
          </div>
          <div class="item">
            <h1>13</h1>
          </div>
          <div class="item">
            <h1>14</h1>
          </div>
          <div class="item">
            <h1>15</h1>
          </div>
          <div class="item">
            <h1>16</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>