Знайте, если мой предмет является последним - Owl Carousel

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

Вы можете сделать это с cominaison из afterAction и 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>