Javascript 如果旋转木马要显示的项目较少，则隐藏自定义导航按钮-Owl旋转木马

我在其中一个页面上使用了owl旋转木马，我使用了主题统一中的以下脚本

我想在转盘上显示的项目较少时隐藏导航按钮，即使在响应模式下也是如此，类似于本示例中所做的操作，在本代码笔示例中，基于不同屏幕大小的可见项目隐藏按钮

我尝试将同样的方法应用到旋转木马，但它对我不起作用

拨弄

---

您只需使用

$(document).ready(function () {
    var carousel = $("#owl-demo");
  if($("#owl-demo div").length + 1 > 5){
  carousel.owlCarousel({
    navigation:true,
    navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
      ],
  });
  }

});

---

等等

我不知道你是否还需要它，但是（以防万一）如果你只是想隐藏按钮，你可以检查窗口宽度（比如@Mohamed Yousef的例子），然后做一个

.hide（）

。大致上应该是这样的：

var viewport=jQuery（window）.width（）；
var itemCount=jQuery（“#owl demo div”）.length；
如果(
（视口>=900&&itemCount>5）//桌面
||（（视口>=600&&viewport<900）&&itemCount>4）//desktopsmall
||（（视口>=479&&viewport<600）&&itemCount>3）//平板电脑
||（viewport<479&&itemCount>2）//移动
)
{
jQuery（'.next-v1、.prev-v1'）.hide（）；
} 
其他的
{
jQuery（'.next-v1、.prev-v1'）.show（）；
}

确保此操作在文档加载和任何其他事件会触发转盘中的更改时运行

我还想提到的是，我通过您在上面的问题中给出的代码片段，而不是您给出的小提琴，对您的代码的外观进行了假设，因为这两者是不同的。我认为@Mohamed Yousef的答案基于小提琴，因为它看起来像是owl转盘的默认实现（尽管我没有仔细检查），而您问题中的小提琴看起来像是手动实现的自定义按钮，设置为触发owl.next/owl.prev事件。

var owl=jQuery（“.owl slider”）猫头鹰旋转木马({
var owl = jQuery(".owl-slider").owlCarousel({
    itemsDesktop: [1000, 5],
    itemsDesktopSmall: [900, 4],
    itemsTablet: [600, 3],
    itemsMobile: [479, 2],
    afterInit: function() {
        var viewport = jQuery(window).width();
        var itemCount = jQuery(".owl-slider div").length;

        if ((viewport >= 900 && itemCount > 5) //desktop
            || ((viewport >= 600 && viewport < 900) && itemCount > 4) //desktopsmall
            || ((viewport >= 479 && viewport < 600) && itemCount > 3) //tablet
            || (viewport < 479 && itemCount > 2) //mobile
        ) {
            jQuery('.next-v1, .prev-v1').show();
        } else {
            jQuery('.next-v1, .prev-v1').hide();
        }
    },
    afterUpdate: function() {
        var viewport = jQuery(window).width();
        var itemCount = jQuery("#owl-demo div").length;

        if (
            (viewport >= 900 && itemCount > 5) //desktop
            || ((viewport >= 600 && viewport < 900) && itemCount > 4) //desktopsmall
            || ((viewport >= 479 && viewport < 600) && itemCount > 3) //tablet
            || (viewport < 479 && itemCount > 2) //mobile
        ) {
            jQuery('.next-v1, .prev-v1').show();
        } else {
            jQuery('.next-v1, .prev-v1').hide();
        }
    }
});

itemsDesktop:[1000,5]，
itemsDesktopSmall:[900,4]，
itemsTablet:[600,3]，
itemsMobile:[479,2]，
afterInit:function（）{
var viewport=jQuery（window）.width（）；
var itemCount=jQuery（“.owl slider div”）.length；
如果（（视口>=900&&itemCount>5）//桌面
||（（视口>=600&&viewport<900）&&itemCount>4）//desktopsmall
||（（视口>=479&&viewport<600）&&itemCount>3）//平板电脑
||（viewport<479&&itemCount>2）//移动
) {
jQuery（'.next-v1、.prev-v1'）.show（）；
}否则{
jQuery（'.next-v1、.prev-v1'）.hide（）；
}
},
更新后：函数（）{
var viewport=jQuery（window）.width（）；
var itemCount=jQuery（“#owl demo div”）.length；
如果(
（视口>=900&&itemCount>5）//桌面
||（（视口>=600&&viewport<900）&&itemCount>4）//desktopsmall
||（（视口>=479&&viewport<600）&&itemCount>3）//平板电脑
||（viewport<479&&itemCount>2）//移动
) {
jQuery（'.next-v1、.prev-v1'）.show（）；
}否则{
jQuery（'.next-v1、.prev-v1'）.hide（）；
}
}
});

如果您使用Bootstrap 3，您可以尝试我的基于响应类的解决方案。 它在调整大小或其他事件时不需要额外的侦听器，在初始化时执行。而且它很简单

        var $el = $('.my-carousel');
        var breakpoints = {
            0: {
                items: 3
            },
            480: {
                items: 4
            },
            769: {
                items: 5
            },
            992: {
                items: 4
            },
            1200: {
                items: 5
            }
        };
        var carousel = $el.owlCarousel({
            loop:   true,
            margin: 10,
            nav:    false,
            dots:   false,
            responsive: breakpoints
        });

        // get real items count
        var items   = $el.find('.owl-item:not(.cloned)').length;

        // $nav = your navigation element, mine is custom
        var $nav    = $el.parent().find('.center-navigation');

        // add responsive classes to hide navigation if needed
        if(breakpoints[1200].items>=items)  $nav.addClass('hidden-lg');
        if(breakpoints[992].items>=items)   $nav.addClass('hidden-md');
        if(breakpoints[769].items>=items)   $nav.addClass('hidden-sm');
        if(breakpoints[480].items>=items)   $nav.addClass('hidden-xs');
        if(breakpoints[0].items>=items)     $nav.addClass('hidden-xxs');

---

我试过这个，它对我有效

函数HidenavigationInbousel（ContainerdivId，视口）
{
var itemCount=jQuery（“#”+ContainerdivId+”.owl item”）.length；
//console.log（ContainerdivId+“”+viewport+“”+itemCount）；
if（viewport/itemCount>（jQuery（“#“+ContainerdivId+”.owl item”）.width（））
{
jQuery（“#“+ContainerdivId+”.owl-prev，“+”#“+ContainerdivId+”.owl-next”）.hide（）；
}
否则{
jQuery（“#“+ContainerdivId+”.owl-prev，“+”#“+ContainerdivId+”.owl-next”）.show（）；
}
}

我建议不要使用响应选项，而是在“上一个/下一个”按钮上添加或删除一个禁用的类，当它不处于活动状态时

jQuery(".owl-slider")
.on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
    if (!event.namespace) return;
    var carousel = event.relatedTarget,
        element = event.target,
        current = carousel.current();
    setTimeout(function() {
        $('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
        $('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());        
    }, 1);
})
.owlCarousel({
    itemsDesktop : [1000,5],
    itemsDesktopSmall : [900,4],
    itemsTablet: [600,3],
    itemsMobile : [479,2],
});

在CSS中，您可以隐藏禁用的元素或更改其样式。 以下是我的禁用类CSS的SASS代码：

.owl-next,
.owl-prev {
    opacity: 1;
    transition: opacity 0.3s ease;
    &.disabled {
        opacity: 0;
    }
}

---

我知道这是一个老问题，但我也在寻找解决方案，并在纯CSS中找到了一个，所以它可能对将来的人有用。为了隐藏一个点，我们可以使用：独子伪类。问题是它没有得到很好的支持（只有chrome），所以最好使用它的别名：“first child:last child”：

---

这是一个老问题，但我发现最简单的方法是使用owlCarousel自己的VAR：

function toggleArrows(){
    var c = $('.carousel').data('owlCarousel');
    if(c.options.items==c.itemsAmount){
        $('.next, .prev').hide();
    }else{
        $('.next, .prev').show();
    }
}

Owl carousel将根据可见项目的数量更新其内部var options.items

您可以在WindowResize事件上运行此代码，但要注意responsiveRefreshRate，它每200ms（默认情况下）更新一次VAR，因此我在窗口调整大小后的超时时间内运行此代码

var tmtResize = false;
$(window).resize(function(){
    if(tmtResize) clearTimeout(tmtResize);
    tmtResize = setTimeout(function(){
        toggleArrows();
    }, 250);
});

---

您使用的脚本在实际示例中起作用，我想对问题中提到的自定义导航应用相同的功能。这需要针对每个屏幕大小进行计算，比如说在桌面上我们只有3个项目，在桌面上显示5个项目，在这种情况下，它应该隐藏导航，在移动版本上显示导航，因为它只显示1个项目。自动隐藏似乎是实际脚本中内置的选项，但我无法找到一种方法将其应用于自定义导航buttons@KnowledgeSeeker我将寻找自动隐藏option@KnowledgeSeeker像这样的人。。我认为没有办法通过使用选项来做你想做的事情。。只有自动播放选项不会隐藏按钮。。但是从逻辑上讲，如果它们提供了在图像之间切换的owlCarousel，并且如果您没有足够多的图像可以切换，那么它们为什么会选择隐藏按钮，从而无需使用owlCarousel。。我会继续搜索

.owl-dot:first-child:last-child {
    display: none;
}

function toggleArrows(){
    var c = $('.carousel').data('owlCarousel');
    if(c.options.items==c.itemsAmount){
        $('.next, .prev').hide();
    }else{
        $('.next, .prev').show();
    }
}

var tmtResize = false;
$(window).resize(function(){
    if(tmtResize) clearTimeout(tmtResize);
    tmtResize = setTimeout(function(){
        toggleArrows();
    }, 250);
});