How can I disable previous/next in OwlCarousel2 if

Question

Is there a way to disable the previous and next links if there aren’t enough items to scroll?

For example: http://truewest.nextmp.net/special-programs these galleries allow for 4 items (desktop), there are only 4 items in this gallery but the buttons to pagination still appear, but should be disabled.

I know there was a way to do it in the previous version, but the .disabled class doesn’t load into the links on this one? I don’t see it doing so in any of the demos either...

Could I use some additional jquery to override this, or is there anything built-in I that I'm missing?

Here is my code:

        $(".owl-carousel").owlCarousel({
            items: 4,
            loop: true,
            rewindNav: false,
            autoplayHoverPause: true,
            margin: 0,
            dots: false,
            navText: "<>",
            responsive:{
                0:{ // breakpoint from 0 up - small smartphones
                    items:1,
                    nav:true
                },
                480:{  // breakpoint from 480 up - smartphones // landscape
                    items:2,
                    nav:false
                },
                768:{ // breakpoint from 768 up - tablets
                    items:3,
                    nav:true,
                    loop:false
                },
                992:{ // breakpoint from 992 up - desktop
                    items:4,
                    nav:true,
                    loop:false
                }
            }

        });

Answer 1

I don't know if a simpler solution exists, but I have expanded gregdev's solution so that no prev or next buttons are shown when you're at the beginning or end of a (non-looping) carousel. Note the addition of a "changed" event.

var $owl = $('.owl-carousel');

$owl.on('initialized.owl.carousel changed.owl.carousel resized.owl.carousel', function(e) {
    $(e.target).toggleClass('hide-owl-next', e.item.index >= e.item.count - e.page.size);
    $(e.target).toggleClass('hide-owl-prev', e.item.index == 0);
});

Once the right-most extreme of a carousel is reached, e.item.count - e.page.size must either equal e.item.index or otherwise be a negative number. If e.page.size can hold more items than the item count then e.item.index will always equal 0, so by chaining the two toggle classes as a CSS target you can completely remove the owl controls (and thus the lonely owl dot), if desired.

.hide-owl-next .owl-next, .hide-owl-prev .owl-prev, .hide-owl-next.hide-owl-prev .owl-controls {
    display: none;
}

Answer 2

Owl Carousel 2 provides a number of useful events which you can use to achieve this:

var $owl = $('.owl-carousel');

$owl.on('initialized.owl.carousel resized.owl.carousel', function(e) {
    $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size);
});

$owl.owlCarousel({ ... });

This snippet hooks into the initialized and resized events to trigger a function when the slideshow is first initialised or when the page is resized. The function compares how many elements are in your slideshow with the page size (the number of slides shown at once); if there are only enough items to display one page, the hide-nav class gets added to the slideshow. You can then use CSS to hide the nav elements:

.hide-nav .owl-controls {
    display: none;
}

If you add or remove slides or anything fancy like that, you might need to hook into additional events so your nav is displayed or hidden as appropriate: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

Answer 3

In Owl carousel 2, it will automatically adds "disabled" class to the prev and next navigation controllers when it reaches first and last elements. Therefore you can just add this css code.

.owl-nav .disabled {
  display: none;
}

Answer 4

Disable the auto loop option

loop: false,

and use the below CSS

.owl-prev.disabled , .owl-next.disabled{
    opacity:0;
}

Answer 5

For control without classes and checks on number of items (thumbs) etc this may help to guide you .. part of the solution can also be what gregdev has supplied above, but see the true_false control on navigation and/or pagination as required. You set a different count based check than just <=1

https://stackoverflow.com/a/46562219/3794783