Owl Carousel, navigation disabled after reaching first/last item
I had the same issue with Owl Carousel 2, My solution - with the native navigation buttons, after calling the slider:
var elm = '.slider'; //your slider class
function toggleArrows(){
if($(elm).find(".owl-item").last().hasClass('active') &&
$(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()){
$(elm).find('.owl-nav .owl-next').addClass("off");
$(elm).find('.owl-nav .owl-prev').addClass("off");
}
//disable next
else if($(elm).find(".owl-item").last().hasClass('active')){
$(elm).find('.owl-nav .owl-next').addClass("off");
$(elm).find('.owl-nav .owl-prev').removeClass("off");
}
//disable previus
else if($(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()) {
$(elm).find('.owl-nav .owl-next').removeClass("off");
$(elm).find('.owl-nav .owl-prev').addClass("off");
}
else{
$(elm).find('.owl-nav .owl-next,.owl-nav .owl-prev').removeClass("off");
}
}
//turn off buttons if last or first - after change
$(elm).on('initialized.owl.carousel', function (event) {
toggleArrows();
});
$(elm).on('translated.owl.carousel', function (event) { toggleArrows(); });
As for the css - give the class "off" the properties you want for disabled button.
You can use callbak afterAction and with your custom controls
afterAction: function(){
if ( this.itemsAmount > this.visibleItems.length ) {
$('.next').show();
$('.prev').show();
$('.next').removeClass('disabled');
$('.prev').removeClass('disabled');
if ( this.currentItem == 0 ) {
$('.prev').addClass('disabled');
}
if ( this.currentItem == this.maximumItem ) {
$('.next').addClass('disabled');
}
} else {
$('.next').hide();
$('.prev').hide();
}
}
Check the working demo - http://jsfiddle.net/p3d52z4n/9/
Simply use callbacks-
loop:false,
navRewind: false
You'll notice that a 'disabled' class is added to owl-next and owl-prev when the first/last item is reached. Adding CSS-
.owl-next.disabled, .owl-prev.disabled {
display: none !important;
}
will do the trick.
Simplest solution:
OwlCarousel 2 gives disabled
class to nav elements when the first/last element is reached.
So you could just need something like that:
.owl-nav{
.disabled{
display: none;
}
}