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

Hide dots when all divs/slides are visible - Owl carousel 2

提问by Dma

everyone!

每个人！

I have dynamicaly generated owl carousel items and i could often have the situation in which all items in the carousel can be visible on the high resolutions. In that case i dont need that one "dot" showing below the carousel.

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

So for e.g. i will have 4 items and all four of them will be visible on the desktop resolution and in that situation i dont need that one slide dot. but i will need the dots for smaller screens because smaller resolutions will display only 1 or 2 items per slide. but there could be situation with more than 4 items in the carousel (4 per slide max on big resolution) and in that case on big resolutions i will need the dots below.

因此，例如，我将有 4 个项目，并且所有四个项目都将在桌面分辨率上可见，在这种情况下，我不需要那个幻灯片点。但我需要小屏幕的点，因为较小的分辨率每张幻灯片只能显示 1 或 2 个项目。但可能会出现轮播中超过 4 个项目的情况（大分辨率下每张幻灯片最多 4 个），在这种情况下，在大分辨率下我将需要下面的点。

Is it possible to set owl carousel2 to hide dots or nav buttons when all divs inside the carousel are visible. i couldn't find that feature in documentation and i have also looked here about this topic but couldn't find the answer.

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

If this feature is not supported already, can anyone help me how to make dot dissapear when all items in the carousell are visible?

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

thx

谢谢

回答by Matt B.

You can add options to the responsive calls to remove the navigation

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

See below for example from Owl Carousel 2 docs

请参阅下面的示例，来自 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
        }
    }
})

回答by Tasos K.

Based on the documentationyou could use the following initialization. On the onResizeyou can have a callback. The argument of the callback has an object with data that tell you how many pages the carousel has.

根据文档，您可以使用以下初始化。在onResize你可以有一个回调。回调的参数有一个包含数据的对象，该对象告诉您轮播有多少页。

So you can determine if there are more than one pages you can turn on or off the dots and implement the following.

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

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
});

Unfortunately, although the documentation mentions that each callback is called with an argument, in my tests the eargument is always undefined.

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

So I used a different approach to determine if there are more than one pages. In my demo, the carousel has 4 items and in my initialization I set that when the width of the page is more than 1000 the page size is 5.

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

So the arbitrary rule that when the width of the page is more than 1000px the carousel has only one dot and in that case you can disable them.

所以当页面的宽度超过 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
});

A working demo is here:

一个工作演示在这里：

P.S.: I know my answer is not complete, but it might help you to make your example work.

PS：我知道我的回答不完整，但它可能会帮助您使您的示例工作。