当所有 div/幻灯片都可见时隐藏点 - Owl carousel 2

Question

大家！

我有动态生成的猫头鹰轮播项目，我经常会遇到这样的情况，即轮播中的所有项目都可以在高分辨率下可见。在这种情况下，我不需要显示在轮播下方的那个“点”。

所以例如我将有 4 个项目，所有四个项目都将在桌面分辨率上可见，在这种情况下，我不需要那个滑动点。但对于较小的屏幕，我需要这些点，因为较小的分辨率每张幻灯片仅显示 1 或 2 个项目。但是在轮播中可能存在超过 4 个项目的情况（大分辨率下每张幻灯片最多 4 个），在这种情况下，在大分辨率上我需要下面的点。

是否可以将 owl carousel2 设置为在轮播中的所有 div 都可见时隐藏点或导航按钮。我在文档中找不到该功能，我也在这里查看了有关此主题的信息，但找不到答案。

如果此功能尚不支持，谁能帮助我在轮播中的所有项目都可见时如何使点消失？

谢谢

Answer 1

您可以向响应式调用添加选项以删除导航

参见下面的 Owl Carousel 2 文档示例

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

Answer 2

基于documentation，您可以使用以下初始化。在onResize 上，您可以进行回调。回调的参数有一个带有数据的对象，该对象告诉您轮播有多少页。

因此，您可以确定是否有多个页面可以打开或关闭点并执行以下操作。

var callback = function(e) { 
    var owl = $('.owl-carousel').data('owlCarousel');

    // This is something I found on the documentation but it does not seem to work
    var hasDots = e.page.count > 1; 

    owl.options.dots = hasDots;
    owl.update();
    owl.refresh();
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    },
    onResize: callback
});

不幸的是，尽管文档提到每个回调都使用参数调用，但在我的测试中，e 参数始终未定义。

所以我使用了一种不同的方法来确定是否有多个页面。在我的演示中，轮播有 4 个项目，在我的初始化中，我设置当页面宽度超过 1000 时，页面大小为 5。

因此，当页面宽度超过 1000 像素时，轮播只有一个点，在这种情况下，您可以禁用它们。

var callback = function(e) { 
    console.log(e); //this is undefined :(
    var owl = $('.owl-carousel').data('owlCarousel');

    var width = $(document).width(); // apply arbitrary rule
    var hasDots = (width <= 1000);
    console.log('width: ' + width + ' hasDots: ' + hasDots); // debug purposes

    owl.options.dots = hasDots;
    owl.update();
    owl.refresh();
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    },
    onResize: callback
});

一个工作演示是here：

P.S.：我知道我的答案并不完整，但它可能会帮助您使您的示例发挥作用。