知道我的物品是否是最新的 - 猫头鹰传送带

Question

我想知道是否有可能知道我的猫头鹰传送带是否在列表的末尾以禁用next按钮。

这里是我的javascript：

<script> 

     $(document).ready(function() { 

      var owl = $("#owl"); 

      owl.owlCarousel({ 
       items : 5, //10 items above 1000px browser width 
       itemsDesktop : [1000,5], //5 items between 1000px and 901px 
       itemsDesktopSmall : [900,3], // betweem 900px and 601px 
       itemsTablet: [600,2], //2 items between 600 and 0 
       itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option 
      }); 

      // Custom Navigation Events 
      $(".next").click(function(){ 
       owl.trigger('owl.next'); 
       if(owl.) 
      }) 
      $(".prev").click(function(){ 
       owl.trigger('owl.prev'); 
      }) 
      $(".play").click(function(){ 
       owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter 
      }) 
      $(".stop").click(function(){ 
       owl.trigger('owl.stop'); 
      }) 

     }); 

    </script> 

这里是我的HTML：

<div class="col-xs-6"> 
       <div class="row contracts" rv-show="context:contracts | length | gt 1"> 
        <div class="col-sm-12 box box-flex" rv-slide="context:stepHide" style=""> 
         <ul id="owl"> 
          <li class="col-xs-2">987456</li> 
          <li class="col-xs-2">558745</li> 
          <li class="col-xs-2">126985</li> 
          <li class="col-xs-2">598746</li> 
          <li class="col-xs-2">325478</li> 
          <li class="col-xs-2">987652</li><li class="col-xs-2">126985</li> 
          <li class="col-xs-2">598746</li> 
          <li class="col-xs-2">325478</li> 
          <li class="col-xs-2">987652</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-6"> 
       <div class="customNavigation"> 
        <a class="btn prev">Previous</a> 
        <a class="btn next">Next</a> 
        <a class="btn play">Autoplay</a> 
        <a class="btn stop">Stop</a> 
       </div> 
      </div> 

     </div> 

    </div> 

</div> 

所以当最后li项目表现，我想禁用下一个按钮。 我搜索到猫头鹰的功能，但我没有找到我想要的东西。

谢谢

Answer 1

您可以用afterAction cominaison和currentItem这样

<script> 

$(document).ready(function() { 

    var owl = $("#owl"); 

    owl.owlCarousel({ 
     items : 5, //10 items above 1000px browser width 
     itemsDesktop : [1000,5], //5 items between 1000px and 901px 
     itemsDesktopSmall : [900,3], // betweem 900px and 601px 
     itemsTablet: [600,2], //2 items between 600 and 0 
     itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option 
     afterAction: function() { 
      if(this.owl.currentItem == $(owl).children().length - 1) { 
       $('.btn .next').hide(); 
      } else { 
       $('.btn .next').show(); 
      } 
     }, 
    }); 

    // Custom Navigation Events 
    $(".next").click(function(){ 
     owl.trigger('owl.next'); 
     if(owl.) 
    }) 
    $(".prev").click(function(){ 
     owl.trigger('owl.prev'); 
    }) 
    $(".play").click(function(){ 
     owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter 
    }) 
    $(".stop").click(function(){ 
     owl.trigger('owl.stop'); 
    }) 

}); 

</script>