How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?

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 al

Answer 1

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

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

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