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的例子）然后做一个colSums。这就是粗略的样子：

.hide()

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

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

Answer 2

我知道这是一个老问题，但也寻找解决方案，并在纯CSS中找到了一个，所以也许它对将来有用。要隐藏一个点，我们可以使用：only-child伪类。问题是它不受支持（只有chrome），所以更好的是使用它的别名“：first-child：last-child”：

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

Answer 3

您只需使用

查看Div的数量即可

$(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>"
      ],
  });
  }

});

检查是否有超过5个div运行owlCarousel，对于响应模式，您需要检查$(window).width();例如

if($(window).width() > 800 && $(window).width() < 1400){ // for desktop
    if($("#owl-demo div").length + 1 > 5){
        // run carousel....
    }
}else if($(window).width() > 600 && $(window).width() < 800){ // for Tab
   if($("#owl-demo div").length + 1 > 4){ // change it as your screen size
        // run carousel....
    }
}

等等

Answer 4

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

Answer 5

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

        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');

Answer 6

我尝试了这个，它对我有用

  function HideNavigationInCarousel(ContainerdivId,viewport)
    {
          
        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();
        }
        else {
            jQuery("#" + ContainerdivId + ".owl-prev,"+"#" + ContainerdivId +" .owl-next").show();
        }
    }

Answer 7

我建议在prev / next按钮上添加或删除已禁用的类，而不是使用自适应选项。

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

Answer 8

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

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。

你可以在window resize事件上运行它，只需要注意的是responsiveRefreshRate，它每200ms更新一次vars（默认情况下），所以我在窗口调整大小后的超时内运行这段代码。

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

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

8 个答案: