如果轮播中显示的项目较少，则隐藏自定义导航按钮 - 猫头鹰旋转木马 [英] Hide custom navigation buttons if carousel has less items to show - Owl Carousel

问题描述

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

I am using owl carousal on one of the pages and i am using following script from theme unify http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html

我想在轮播时隐藏导航按钮即使在响应模式下也显示较少的项目，类似于本例中的内容 http： //codepen.io/OwlFonk/pen/qhgjb?editors=101 ，在此codepen示例按钮中隐藏基于不同屏幕尺寸的项目。

I want to hide the navigation buttons when carousel has less items to show even in responsive mode something similar to what has been done in this example http://codepen.io/OwlFonk/pen/qhgjb?editors=101, in this codepen example button hide based on items visible in different screen sizes.

我试图对carousal实现相同但它不适合我

I tried to implement same to the carousal but it is not working for me

小提琴 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');
    })

推荐答案

Dunno如果你还需要它，但（以防万一）如果它只是按钮那你就是喜欢隐藏，你可以检查窗口宽度（比如@ Mohamed-Yousef的例子），然后只需要做一个 .hide（）。这就是大致的样子：

Dunno if you still need it, but (just in case) if it's just the buttons that you'd like to hide, you can check the window width (like @Mohamed-Yousef's example) and then just do a .hide(). This is how it should roughly look like:

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

确保在文档加载时运行而且其他任何事件都会引发轮播中的变化。

Make sure that this runs on document load and whatever other event would trigger changes in the carousel.

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

I'd also just like to mention that I made assumptions to how your code looks like via the code snippet you gave in your question above, and not from the fiddle you gave as the two are different from each other. The fiddle is what I think @Mohamed-Yousef was basing his answer from, as it looks like the default implementation of owl carousel (I didn't check it thoroughly though), while the one in your question looks like a manually implemented custom button that is set to trigger the owl.next/owl.prev events.

这篇关于如果轮播中显示的项目较少，则隐藏自定义导航按钮 - 猫头鹰旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！