如果没有足够的项目可以滚动，如何在OwlCarousel2中禁用上一个/下一个？

如果没有足够的项目可以滚动，有没有办法禁用上一个和下一个链接？

例如： 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

Owl Carousel 2提供了许多有用的事件，您可以使用它们来实现此目的：

 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({ ... }); 

此片段挂钩到initialized和resized事件，以在首次初始化幻灯片放映或调整页面大小时触发函数。 该function会将幻灯片中的元素数量与页面大小（一次显示的幻灯片数量）进行比较; 如果只有足够的项目来显示一个页面，则hide-nav类将添加到幻灯片中。 然后，您可以使用CSS隐藏导航元素：

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

如果您添加或删除幻灯片或类似的任何内容，您可能需要挂钩其他事件，以便适当地显示或隐藏导航： http ： //www.owlcarousel.owlgraphic.com/docs/api-events.html

Answer 2

在Owl轮播2中，当它到达第一个和最后一个元素时，它会自动将“禁用”类添加到prev和下一个导航控制器。 因此，您只需添加此css代码即可。

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

Answer 3

我不知道是否存在更简单的解决方案，但我已经扩展了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; } 

Answer 4

对于没有类的控制和项目数量（拇指）等的检查，这可能有助于指导您。解决方案的一部分也可以是gregdev上面提供的，但是根据需要查看导航和/或分页的true_false控件。 您设置了一个不同的基于计数的检查，而不仅仅是<= 1

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

Answer 5

禁用自动循环选项

 loop: false, 

并使用下面的CSS

 .owl-prev.disabled , .owl-next.disabled{ opacity:0; }