如果沒有足夠的項目滾動，如何禁用OwlCarousel2中的上一個/下一個？

Question

如果沒有足夠的項目滾動，是否有辦法禁用上一個和下一個鏈接？

例如：http://truewest.nextmp.net/special-programs這些畫廊允許4個項目（桌面），此畫廊中只有4個項目，但仍然顯示分頁按鈕，但應該禁用。

我知道在以前的版本中有這樣做的方法，但是.disabled類不會加載到這個鏈接上？我沒有看到它在任何演示中都這樣做...

我可以使用一些額外的jquery來覆蓋這個，或者是否有什麼內置的我，我失蹤了？

這裏是我的代碼：

 $(".owl-carousel").owlCarousel({ 
      items: 4, 
      loop: true, 
      rewindNav: false, 
      autoplayHoverPause: true, 
      margin: 0, 
      dots: false, 
      navText: "<>", 
      responsive:{ 
       0:{ // breakpoint from 0 up - small smartphones 
        items:1, 
        nav:true 
       }, 
       480:{ // breakpoint from 480 up - smartphones // landscape 
        items:2, 
        nav:false 
       }, 
       768:{ // breakpoint from 768 up - tablets 
        items:3, 
        nav:true, 
        loop:false 
       }, 
       992:{ // breakpoint from 992 up - desktop 
        items:4, 
        nav:true, 
        loop:false 
       } 
      } 

     }); 

Answer 1

貓頭鷹傳送帶2提供了一些你可以用它來實現這個有用的事件：進入initialized和resized事件

var $owl = $('.owl-carousel'); 

$owl.on('initialized.owl.carousel resized.owl.carousel', function(e) { 
    $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size); 
}); 

$owl.owlCarousel({ ... }); 

這個片段掛鉤當幻燈片初次初始化或頁面大小調整時觸發一個函數。該功能比較幻燈片中的元素數量和頁面大小（一次顯示的幻燈片數量）;如果只有足夠的項目可以顯示一個頁面，則hide-nav類會被添加到幻燈片中。然後，您可以使用CSS來隱藏導航元素：

.hide-nav .owl-controls { 
    display: none; 
} 

如果您添加或刪除幻燈片或任何幻想這樣的，你可以讓你的導航顯示還是隱藏在適當需要掛接到其他事件：http://www.owlcarousel.owlgraphic.com/docs/api-events.html

Answer 2

在貓頭鷹傳送帶2中，當它到達第一個和最後一個元素時，會自動將「禁用」類添加到prev和下一個導航控制器。因此你可以添加這個CSS代碼。

.owl-nav .disabled { 
    display: none; 
} 

Answer 3

對於不上的項目（大拇指）數類和檢查控制等，這可能對您有所幫助。該解決方案的一部分，也可以什麼gregdev已經在上面提供，但看到導航true_false控制和/或按要求分頁。您可以設置不同的計數根據檢查不僅僅是< = 1

https://stackoverflow.com/a/46562219/3794783

Answer 4

我不知道，如果一個簡單的解決方案存在，但我已經擴大gregdev的解決方案，使顯示沒有上一個或下一個按鈕，當你」在一個（非循環）輪播的開始或結束。請注意添加了「更改」事件。

var $owl = $('.owl-carousel'); 

$owl.on('initialized.owl.carousel changed.owl.carousel resized.owl.carousel', function(e) { 
    $(e.target).toggleClass('hide-owl-next', e.item.index >= e.item.count - e.page.size); 
    $(e.target).toggleClass('hide-owl-prev', e.item.index == 0); 
}); 

一旦最右邊的一個極端轉盤的到達，e.item.count - e.page.size必須要麼等於e.item.index或者以其他方式是負數。如果e.page.size可以容納比項目數更多的項目，那麼e.item.index將始終等於0，因此通過將兩個切換類鏈接爲CSS目標，如果需要，可以完全移除貓頭鷹控件（因此可以完全移除孤獨的貓頭鷹點）。

.hide-owl-next .owl-next, .hide-owl-prev .owl-prev, .hide-owl-next.hide-owl-prev .owl-controls { 
    display: none; 
}