javascript - Hide custom navigation buttons if carousel has less items to show - Owl Carousel - Stack Overflow

admin管理员组

文章数量:1221376

I am using owl carousel on one of the pages and I am using following script from theme unify .7/shortcode_carousels.html

I want to hide the navigation buttons when the carousel has fewer items to show even in responsive mode something similar to what has been done in this example , in this codepen example button hide based on items visible in different screen sizes.

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

fiddle

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

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

I want to hide the navigation buttons when the carousel has fewer 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.

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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 19, 2020 at 12:48 Andhi Irawan 48188 silver badges1717 bronze badges asked Apr 20, 2015 at 6:26 LearningLearning 20k4444 gold badges190190 silver badges394394 bronze badges 1

• you can manually set breakpoint options in your carousel owlcarousel.owlgraphic.com/demos/responsive.html – Drew Commented Apr 20, 2015 at 6:47

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 6

I don't know 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 events would trigger changes in the carousel.

I'd also just like to mention that I made assumptions about 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.

I know it's an old question, but also looked for a solution and found one in pure CSS, so maybe it will be useful for someone in future. To hide one dot we can use :only-child pseudo-class. The problem is that it's not supported well (only chrome), so better one is to use an alias of it ":first-child:last-child":

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

you can simply check the number of Divs by using

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

});

this check if more than 5 divs run owlCarousel and for responsive mode you need to check for $(window).width(); for example

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

and so on

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

If you use Bootstrap 3, you can try my solution which is based on reponsive classes. It doesnt need additional listener on resize or other events and is executed on initialize. Moreover its quite simple.

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

I tried this and it worked for me

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

Instead of using responsive options, I suggest adding or removing a disabled class on prev/next button, when it's not active.

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

In CSS, you can either hide disabled element or change its style. Here's my SASS code for disabled class CSS :

.owl-next,
.owl-prev {
    opacity: 1;
    transition: opacity 0.3s ease;
    &.disabled {
        opacity: 0;
    }
}

This is an old question, but the simplest way I found to do it, is to use owlCarousel own vars:

function toggleArrows(){
    var c = $('.carousel').data('owlCarousel');
    if(c.options.items==c.itemsAmount){
        $('.next, .prev').hide();
    }else{
        $('.next, .prev').show();
    }
}

Owl carousel will update his internal var options.items based on the number of visible items.

You can run this on the window resize event, just be careful with the responsiveRefreshRate, which update the vars each 200ms (by default), so I run this code inside a timeout after window resize.

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

本文标签： javascriptHide custom navigation buttons if carousel has less items to showOwl CarouselStack Overflow