настройка карусели сова

Question

Я настраиваю синхронизированный ползунок совы, то есть 2 ползунка (оба с 5 слайдами / элементами), с дополнительной навигационной "#homecustomnav" (стрелки назад / вперед), расположенной слева и справа от "#homeslidernav" , Надеюсь, что это имеет смысл ..

Есть 2 проблемы, с которыми я сейчас сталкиваюсь,

1. При использовании «#homecustomnav», который настроен для отображения только в мобильном представлении, «#homeslidernav» пропускает слайд (2-й слайд, чтобы быть конкретным) при использовании кнопки «следующий». Однако при использовании кнопки «prev» проблем не возникает.

2. Я пытался установить "#homeslidernav" в "loop: false", но, похоже, он не работает. При использовании «#homecustomnav» он продолжает двигаться в любом направлении.

   <div id="homecustomnav">
     <a class="prev"></a>
     <a class="next"></a>
   </div>
   
   <div id="homeslidernav" class="owl-carousel">
     <div class="slide-content">
       <img src="" alt=""/>
       <h4></h4>
     </div>
   
     <div class="slide-content">
       <img src="" alt=""/>
       <h4></h4>
     </div>
   
     <div class="slide-content">
       <img src="" alt=""/>
       <h4></h4>
     </div>
   
     <div class="slide-content">
       <img src="" alt=""/>
       <h4></h4>
     </div>
   
     <div class="slide-content">
       <img src="" alt=""/>
       <h4></h4>
     </div>
   </div>
   
   <div id="homeslider" class="owl-carousel">
     <div class="slide-content clearfix">
       <div class="text-container">
         <h3></h3>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <a href="#" class="btn btn-outline-default"></a>
       </div>
   
       <div class="img-container">
         <img src="" alt="">
       </div>
     </div>
   
     <div class="slide-content clearfix">
       <div class="text-container">
         <h3></h3>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <a href="#" class="btn btn-outline-default"></a>
       </div>
   
       <div class="img-container">
         <img src="" alt="">
       </div>
     </div>
   
     <div class="slide-content clearfix">
       <div class="text-container">
         <h3></h3>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <a href="#" class="btn btn-outline-default"></a>
       </div>
   
       <div class="img-container">
         <img src="" alt="">
       </div>
     </div>
   
     <div class="slide-content clearfix">
       <div class="text-container">
         <h3></h3>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <a href="#" class="btn btn-outline-default"></a>
       </div>
   
       <div class="img-container">
         <img src="" alt="">
       </div>
     </div>
   
     <div class="slide-content clearfix">
       <div class="text-container">
         <h3></h3>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <a href="#" class="btn btn-outline-default"></a>
       </div>
   
       <div class="img-container">
         <img src="" alt="">
       </div>
     </div>
   </div>
   

   $ (документ) .ready (function () {

       var homeslider = $("#homeslider");
       var homeslidernav = $("#homeslidernav");
       var homecustomnav = $("#homeslider");
   
       homeslidernav.owlCarousel({
         items: 5,
         itemsDesktop      : [1199,5],
         itemsDesktopSmall : [979,5],
         itemsTablet       : [768,1],
         pagination: false,
         navigation: false,
         responsiveRefreshRate: 150,
         afterInit: function(el){
           el.find(".owl-item").eq(0).addClass("active");
         }
       });
   
       homeslider.owlCarousel({
         singleItem: true,
         slideSpeed: 1000,
         navigation: false,
         pagination: false,
         afterAction: syncPosition,
         responsiveRefreshRate: 150,
       });
   
       function syncPosition(el){
         var current = this.currentItem;
         $("#homeslidernav")
           .find(".owl-item")
           .removeClass("active")
           .eq(current)
           .addClass("active")
         if($("#homeslidernav").data("owlCarousel") !== undefined){
           center(current)
         }
       }
   
       $("#homeslidernav").on("click", ".owl-item", function(e){
         e.preventDefault();
         var number = $(this).data("owlItem");
         homeslider.trigger("owl.goTo",number);
       });
   
       function center(number){
         var homeslidernavvisible = homeslidernav.data("owlCarousel").owl.visibleItems;
         var num = number;
         var found = false;
         for(var i in homeslidernavvisible){
           if(num === homeslidernavvisible[i]){
             var found = true;
           }
         }
   
         if(found===false){
           if(num>homeslidernavvisible[homeslidernavvisible.length-1]){
             homeslidernav.trigger("owl.goTo", num - homeslidernavvisible.length+2)
           }else{
             if(num - 1 === -1){
               num = 0;
             }
             homeslidernav.trigger("owl.goTo", num);
           }
         } else if(num === homeslidernavvisible[homeslidernavvisible.length-1]){
           homeslidernav.trigger("owl.goTo", homeslidernavvisible[1])
         } else if(num === homeslidernavvisible[0]){
           homeslidernav.trigger("owl.goTo", num-1)
         }
       }
   
       homecustomnav.owlCarousel();
   
       // Custom Navigation Events
       $(".next").click(function(){
         homecustomnav.trigger('owl.next');
       })
   
       $(".prev").click(function(){
         homecustomnav.trigger('owl.prev');
       })
     });