Javascript 所有分区/幻灯片可见时隐藏点-猫头鹰转盘2

各位!

---

我有动态生成的owl旋转木马项目，我经常会遇到这样的情况：旋转木马中的所有项目都可以在高分辨率上看到。在这种情况下，我不需要一个“点”显示在旋转木马下面

例如，我将有4个项目，它们都将在桌面分辨率上可见，在这种情况下，我不需要一个幻灯片点。但是我需要小屏幕上的点，因为小分辨率每张幻灯片只能显示1到2个项目。但在旋转木马中可能有超过4个项目的情况（在大分辨率上，每张幻灯片最多4个），在这种情况下，在大分辨率上，我需要下面的点

当转盘内的所有div都可见时，是否可以将owl carousel2设置为隐藏点或导航按钮。我在文档中找不到这个特性，我也在这里查看了这个主题，但找不到答案

如果此功能还不受支持，有人能帮助我在旋转木马中的所有项目都可见时如何使点消失吗

thx

基于，您可以使用以下初始化。在

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

因此，当页面宽度超过1000px时，旋转木马只有一个点，在这种情况下，您可以禁用它们

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

var callback=函数（e）{
console.log（e）；//这是未定义的：(
var owl=$（'.owl carousel'）.data（'owlCarousel'）；
var width=$（document）.width（）；//应用任意规则
var hasDots=（宽度您可以向响应调用添加选项以删除导航

请参见以下Owl转盘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
        }
    }
})

“我有Dynamicly生成的owl转盘项目”…使用服务器端代码？您可能希望在init上使用回调函数并创建一个计算幻灯片数的函数，然后应用CSS隐藏导航点。请尝试并返回一个更具体的问题。是的，我不参与开发，但项目是使用服务器生成的side@isherwood谢谢你的建议，我想我会尽力的按照你的建议做点什么。为了“…更具体的问题”，我没有在问题中输入足够的信息，或者？我想知道的事情很简单，我想知道当所有项目都可见时如何隐藏点。我使用owl旋转木马主要是因为屏幕分辨率较小。在全尺寸网络上，我大多数时候都不需要点。再次感谢您的建议
一点
一种微交互，告诉用户他们在唯一的页面上，删除它就是删除没有更多显示的反馈，这是有原因的。您的第二种方法非常适合宽度不同于响应对象属性预设的宽度。您为什么不简单地以这种方式打开/关闭dots属性：$owlCarousel（{loop:true，margin:10，nav:true，responsive:{0:{items:1}，600:{items:3}，1000:{items:4，dots:false}}}）；我认为这并不能解决问题：当只有一个点时隐藏点（项目总数=按页列出的项目数）您可以在回调中使用独子选择器：$（“.owl dots.owl dot:only child”）.hide（）；