如果轮播中显示的项目较少,则隐藏自定义导航按钮 - 猫头鹰旋转木马

Question

我正在其中一个页面上使用owl carousal,我正在使用主题统一的以下脚本http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html

我希望隐藏导航按钮,当旋转木马具有较少的项目时,即使在响应模式下也会显示类似于此示例中的内容http://codepen.io/OwlFonk/pen/qhgjb?editors=101,在此codepen示例中按钮隐藏基于不同屏幕尺寸的可见项目.

我试图在转盘上实现同样的功能,但它对我不起作用

小提琴http://codepen.io/anon/pen/gpYKvq

    //Owl Slider v1
    var owl = jQuery(".owl-slider").owlCarousel({
        itemsDesktop : [1000,5],
        itemsDesktopSmall : [900,4],
        itemsTablet: [600,3],
        itemsMobile : [479,2],
    });
    jQuery(".next-v1").click(function(){
        owl.trigger('owl.next');
    })
    jQuery(".prev-v1").click(function(){
        owl.trigger('owl.prev');
    })

Answer 1

Dunno,如果你仍然需要它,但(以防万一)如果它只是你想要隐藏的按钮,你可以检查窗口宽度(如@ Mohamed-Yousef的例子)然后只做一个.hide().这是它大致应该是这样的:

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').hide();
} 
else
{
     jQuery('.next-v1, .prev-v1').show();
}

确保它在文档加载时运行,并且任何其他事件都会触发轮播中的更改.

我还想提一下,我通过你在上面的问题中给出的代码片段来假设你的代码看起来是什么样的,而不是你给出的小提琴,因为两者是不同的.小提琴是我认为@Mohamed-Yousef基于他的答案,因为它看起来像猫头鹰旋转木马的默认实现(虽然我没有彻底检查),而你的问题中的那个看起来像手动实现的自定义按钮设置为触发owl.next/owl.prev事件.