如果没有足够的项目滚动，我如何禁用 OwlCarousel2 中的上一个/下一个？答案

【问题标题】：How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?如果没有足够的项目滚动，我如何禁用 OwlCarousel2 中的上一个/下一个？
【发布时间】：2014-12-30 19:45:09
【问题描述】：

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

例如：http://truewest.nextmp.net/special-programs 这些画廊允许 4 个项目（桌面），这个画廊只有 4 个项目，但分页按钮仍然出现，但应该禁用。

我知道在以前的版本中有一种方法可以做到这一点，但是 .disabled 类没有加载到这个版本的链接中？我也没有在任何演示中看到它这样做......

我可以使用一些额外的 jquery 来覆盖它吗，还是有什么我缺少的内置 I？

这是我的代码：

        $(".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
                }
            }

        });

【问题讨论】：

类似于这个问题：stackoverflow.com/questions/28342603/…? - 但是这个解决方案并不适合我。临时修复不会在加载时将“禁用”类添加到适用的“上一个/下一个”，只有在您滚动到末尾后，它才会将其添加到“下一个”，然后当您滚动回到开头时，它将它添加到“prev”

标签： jquery jquery-plugins owl-carousel

【解决方案1】：

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

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

【讨论】：

这是问题的一部分，版本 2 中不再添加 .disabled，版本 1 中。owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
由于您使用的是 "loop: true," ，我的解决方案将无法正常工作。它应该适用于“循环：假”。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

我不知道是否存在更简单的解决方案，但我扩展了 gregdev 的解决方案，这样当您处于（非循环）轮播的开头或结尾时，不会显示 prev 或 next 按钮。请注意添加了“更改”事件。

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 目标，您可以完全删除 owl 控件（以及因此孤独的 owl 点） .

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

【讨论】：

【解决方案4】：

禁用自动循环选项

loop: false,

并使用下面的 CSS

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

【讨论】：

【解决方案5】：

对于没有类的控制和对项目数量（拇指）等的检查，这可能有助于指导您.. 部分解决方案也可以是 gregdev 上面提供的，但请参阅导航和/或分页的 true_false 控制必需的。您设置了不同的基于计数的检查，而不仅仅是

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

【讨论】：