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

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