I'm trying to use owl carousel for my website. I want to disable the navigation after it reach first/last item, for example by adding "disabled" class in navigation then disable it via css. Is it possible?
my code
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
rewindNav : false,
pagination : false,
items : 4
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
});.item { background: #e5e5e5; margin: 10px}
.btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor: pointer}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>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/
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;
}
}
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.
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.
It's Working for me using Owl Carousel 2
$('#owlCarousel').owlCarousel({
loop:true,
loop:false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:true
},
1000:{
items:4,
nav:true,
touchDrag:false,
//pullDrag:false,
freeDrag:false
}
},
onTranslated:callBack
});
function callBack(){
if($('.owl-carousel .owl-item').last().hasClass('active')){
$('.owl-next').hide();
$('.owl-prev').show();
console.log('true');
}else if($('.owl-carousel .owl-item').first().hasClass('active')){
$('.owl-prev').hide();
$('.owl-next').show();
console.log('false');
}
}
$('#owlCarousel .owl-prev').hide();
I was searching to solution , i found some code and i combine them. Its works for me. when first item left arrow hiding when last item right arrow hiding.
Attention to .on() event
$('.homeSlider').owlCarousel({
loop: false ,
autoplay: false,
navClass: ['fa fa-chevron-left', 'fa fa-chevron-right'],
navText: ['', ''],
margin: 20,
startPosition: -0,
items: 3,
nav: true,
dots: false,
center: false,
autoWidth: true,
responsive: {
0: {
items: 1
},
600: {
items:2,
margin: 20,
startPosition: 0,
loop: true,
autoWidth: true,
center: false
},
992: {
items: 3
},
1920: {
items: 5
}
}}).on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
//alert("s");
if (!event.namespace) return;
var carousel = event.relatedTarget,
element = event.target,
current = carousel.current();
if(current === carousel.maximum()) $('.homeSlider .fa-chevron-right').hide();
if(current === carousel.minimum()) $('.homeSlider .fa-chevron-left').hide();
});
$('.homeSlider .fa-chevron-left').hide();
Working for me on Owl Carousel 2 with custom navigation
onTranslated: function(event){
if (event.item.index == 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
Also noticed that you can have several callbacks with the responsive approach like :
responsive:{
0:{
items: 1,
slideBy: 1,
onTranslated: function(event){
if (event.item.index == 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
},
992:{
items: 2,
slideBy: 2,
onTranslated: function(event){
if (event.item.index === 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count / 2)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
}
}
As said befor, you can use Owl's callbacks to hide or change the "Next" button. But instead of using some disabled class to tell the user the button should not be used anymore you can actually disable it very simply:
$slider.on('changed.owl.carousel', ev => {
const carousel = ev.currentTarget
$('.owl-next', $el).attr('disabled', carousel.current() === carousel.maximum())
$('.owl-prev', $el).attr('disabled', carousel.current() === carousel.minimum())
})
You can style the disabled button with the CSS selector [disabled].
来源：https://stackoverflow.com/questions/25894585/owl-carousel-navigation-disabled-after-reaching-first-last-item