Learning Learning - 4 years ago 2168
Javascript Question

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

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

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.

I tried to implement same to the carousal 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');
})

Answer Source

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.

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download