我在其中一页上使用猫头鹰轮播，并且在主题统一http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html中使用以下脚本
当轮播中即使在响应模式下也显示较少的项目时，我想隐藏导航按钮，类似于此示例中http://codepen.io/OwlFonk/pen/qhgjb?editors=101所做的操作示例按钮根据在不同屏幕尺寸下可见的项目进行隐藏。
我试图对轮播实施相同的操作，但对我来说不起作用
提琴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');
})
我不知道您是否仍然需要它，但是（以防万一）如果只是您要隐藏的按钮，您可以检查窗口宽度（例如@ 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事件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句