Just like in a topic - there are no "disabled" classes, when OwlCarousel works in "loop: false" mode.
+1 for this. Here's how I've done it for the moment:
var owl = $(".owl-carousel");
owl.owlCarousel({
slideBy: 3,
margin: 15,
dots: false,
navContainer: '.owl-nav-container',
nav: true,
navClass: ['btn btn-default owl-carousel-left disabled','btn btn-default owl-carousel-right'],
navText: ['<i class="glyphicon glyphicon-chevron-left""></i>', '<i class="glyphicon glyphicon-chevron-right"></i>'],
callbacks: true,
info: true,
onTranslated: $(this).on('translated.owl.carousel', function(e) {
var items_per_page = e.relatedTarget.options.slideBy;
var nav_container = e.relatedTarget.options.navContainer;
var item_index = e.item.index;
var item_count = e.item.count;
var last_vis_item_index = items_per_page + item_index;
if(last_vis_item_index === item_count){
$(nav_container).find('div:last').addClass('disabled');
}
else{
$(nav_container).find('div:last').removeClass('disabled');
}
if(item_index != 0){
$(nav_container).find('div:first').removeClass('disabled');
}
else{
$(nav_container).find('div:first').addClass('disabled');
}
})
});
This in no case a good idea:
...
onTranslated: $(this).on('...') ...
...
Ether you use events or callbacks.
Anyway this bug will be fixed soon.
Here is a much simpler implementation to fix this in the meanwhile:
$(".owl-carousel").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();
$('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
$('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());
})
This is fixed. But please note that you have also to disable rewind; the replacement for navRewind in the upcoming version.
Most helpful comment
Here is a much simpler implementation to fix this in the meanwhile: