Не работает синхронизация двух слайдеров OWL Carousel, если число слайдов не кратно числу слайдов во второй карусели

$(document).ready(function() {

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 5; //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: ['<svg width="22px" height="40px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="22px" height="40px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
  }).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: true,
      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);
  });
});

.slider { 
  width: 100%;    
  background-color: #e0e8eb;
  margin: 0 auto;
  margin-bottom: 20px;    
}

.owl-dots {
  text-align: center;
}   

.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: gray!important;
  margin: 0 5px;
}
  
.owl-dot.active {
  background: blue!important;
}

#sync1 {
  // height: 400px;
  // padding: 15px;

  .item {
    // background: #0c83e7;
    padding: 15px 40px 0 40px;
    // margin: 5px;     
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: left;

    img {
      width: auto !important;
      max-height: 400px;
      height: 400px;
      object-fit: contain;
      max-width: 100%;
      margin: 0 auto;
      // padding: 20px 30px 5px 30px;
    }

    h3 {
      font-size: 18px;
      font-weight: 300;
      margin: 5px 0;
    }
  }
}

#sync2 {
  padding: 15px;

  .item {
    height: 100px;
    overflow: hidden;  
    margin: 2px;   
    border-radius: 7px;  
    cursor: pointer;     
  }

  .current .item{
    // background: #0c83e7;
    border: 2px solid #0c83e7;
  }

  img {
    width: 100%;      
    object-fit: cover;
    background-position: center;
    border-radius: 7px;    
    height: 100%;
    padding: 3px;
  }
} 

.owl-theme {

  .owl-nav {
    /*default owl-theme theme reset .disabled:hover links */
    [class*='owl-'] {
      transition: all .3s ease;
      // &.disabled:hover {
        // background-color: #D6D6D6;
      // }   
    }    
  }

  button {
    // outline: none;
    &:focus {
        outline: none;
    }
  }
}
  
//arrows on first carousel
#sync1.owl-theme {
  position: relative;

  .owl-next, .owl-prev {   
   position: absolute;   
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    height: 100%;
    
    svg {     
      width: 30px;    
      height: 30px;
      display: block;      
      display: none;  
      padding: 5px;
    }  

    &:hover {

      svg {
       
        display: block;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        border: 1px solid rgba(255, 255, 255, 0.4);
      }
    }  
  }

  .owl-prev {    
    left: 0;
    padding-right: 60px!important;
    svg {
      margin-left: 5px;
    }
  }

  .owl-next {
    right: 0;
    padding-left: 60px!important;
    svg {
      margin-right: 5px;
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<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>

<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>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>