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

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

DT[ave(seq(.N), Date, ID, FUN = function(x) length(x) == 1L)]

此代码段挂钩到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类会添加到幻灯片中。然后，您可以使用CSS隐藏导航元素：

hide-nav

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

Answer 2

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

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

Answer 3

我不知道是否存在更简单的解决方案，但我已经扩展了gregdev的解决方案，以便在您开始或结束时不显示上一个或下一个按钮（非 - 旋转木马。请注意添加＆＃34;已更改＆＃34;事件

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控件为需要。您设置的基于计数的检查不仅仅是＆lt; = 1

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

Answer 5

禁用自动循环选项

loop: false,

并使用以下CSS

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

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

5 个答案: