小故障猫头鹰轮播设置

Question

我正在设置一个同步的猫头鹰滑块，即2个滑块（均具有5个幻灯片/项目），并在“ #homeslidernav”的左侧和右侧有一个附加的导航“ #homecustomnav”（上一个/下一个箭头） 。希望有道理..

我目前面临2个问题，

1. 使用设置为仅在移动视图上显示的“ #homecustomnav”时，使用“下一个”按钮时，“＃homeslidernav”会跳过幻灯片（特定于第二张幻灯片）。但是，使用“上一个”按钮没有问题。

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>
   

   $（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');
       })
     });