javascript - 如果轮播显示的元素较少，则隐藏自定义导航按钮 - Owl Carousel

Question

我在其中一个页面上使用猫头鹰轮播，我正在使用主题 unify http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html 中的以下脚本

即使在响应模式下轮播显示的元素较少时，我也想隐藏导航按钮，类似于此示例中所做的事情 http://codepen.io/OwlFonk/pen/qhgjb?editors=101 ，在此代码笔示例中，按钮根据在不同屏幕尺寸下可见的元素隐藏。

我试图对轮播实现相同的功能，但它对我不起作用

fiddle 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

我不知道你是否还需要它，但是(以防万一)如果你只是想隐藏按钮，你可以检查窗口宽度(比如@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();
}

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

我还想提一下，我通过您在上面问题中提供的代码片段对您的代码进行了假设，不是您提供的 fiddle ，因为两者是彼此不同。 fiddle 是我认为@Mohamed-Yousef 的答案的基础，因为它看起来 像猫头鹰轮播的默认实现(虽然我没有彻底检查)，而你的问题看起来像一个手动实现的自定义按钮，设置为触发 owl.next/owl.prev 事件。