如果没有足够的项目可以滚动，如何在 OwlCarousel2 中禁用上一个/下一个? [英] How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?

问题描述

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

Is there a way to disable the previous and next links if there aren’t enough items to scroll?

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

For example: http://truewest.nextmp.net/special-programs these galleries allow for 4 items (desktop), there are only 4 items in this gallery but the buttons to pagination still appear, but should be disabled.

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

I know there was a way to do it in the previous version, but the .disabled class doesn’t load into the links on this one? I don’t see it doing so in any of the demos either...

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

Could I use some additional jquery to override this, or is there anything built-in I that I'm missing?

这是我的代码:

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

        });

推荐答案

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

Owl Carousel 2 provides a number of useful events which you can use to achieve this:

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 事件挂钩，以在幻灯片首次初始化或调整页面大小时触发函数.该功能将幻灯片中的元素数量与页面大小(一次显示的幻灯片数量)进行比较；如果只有足够的项目来显示一页，则 hide-nav 类被添加到幻灯片中.然后，您可以使用 CSS 隐藏导航元素:

This snippet hooks into the initialized and resized events to trigger a function when the slideshow is first initialised or when the page is resized. The function compares how many elements are in your slideshow with the page size (the number of slides shown at once); if there are only enough items to display one page, the hide-nav class gets added to the slideshow. You can then use CSS to hide the nav elements:

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

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

If you add or remove slides or anything fancy like that, you might need to hook into additional events so your nav is displayed or hidden as appropriate: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

这篇关于如果没有足够的项目可以滚动，如何在 OwlCarousel2 中禁用上一个/下一个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！