glitchy owl carousel setup

Question

I'm setting up a synced owl slider, meaning 2 sliders (both with 5 slides/items), with an additional nav "#homecustomnav" (prev/next arrows) positioned to the left and right of "#homeslidernav". Hope that makes sense..

There are 2 issues I'm currently facing,

1. When using "#homecustomnav", which is set to only be displayed on mobile view, "#homeslidernav" skips a slide (the 2nd slide to be specific) when using the "next" button. However, there's no issue when using the "prev" button.

2. I've tried setting "#homeslidernav" to "loop:false" but it does not seem to be working. It just keeps going in either direction when using "#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>
   

   $(document).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');
       })
     });