Owlcarousel2: Prev, Next buttons should hide/disabled when first / last is active

[akashkamboj]

Prev button should hide automatically on first slide.

Next button should hide automatically on last slide.

[witrin]

Please add a JSFiddle or JS Bin to demonstrate the bug. You'll find coressponding templates in the README. Thanks!

[witrin]

Currently this is the case when you have loop and rewind disabled.

[adamevosite]

I know you have closed this but I can't get the prev and next buttons to hide when on the first/last slide. All I need really is the ability to add a class or a 'disabled' class to be added to the previous button when on the first slide or the same to the next button when on the last slide. I can then style these accordingly.

The only thing I can think of doing at the moment is a callback but I wasn't sure if there was a better way?

I have created a JSFiddle with the parameters set as described in your previous post: http://jsfiddle.net/a3wUL/11/

Any help will be appreciated.

Thanks
Adam

[ssuess]

I can't get this to work either, do you have any new pointers or advice please? I am using the following code (and I have tried without success adding rewind false and true, navRewind false and true. Nothing I do adds a class to my next and prev links or container at the last/first slide, so I am unable to hide them. Here is my code (without rewind or navRewind, although as mentioned I have tried them without success):

$("#owl-demo").owlCarousel({
navContainer:'.nav-circlepop',
dots:false,
slideSpeed : 300,
paginationSpeed : 400,
loop: false,
center:false,
startPosition: 'URLHash',
URLhashListener:true,
autoplayHoverPause: true,
lazyLoad: false,
items : 1,
}).on('translated.owl.carousel', function(e) {
if (!e.namespace)
return;
var hash = '#' + e.relatedTarget.$stage
.children()
.eq(e.relatedTarget.current())
.find('[data-hash]')
.attr('data-hash');
if (window.location.hash != hash)
window.history.pushState('', '', hash);
});

I should add I also tried using the built in prev and nav links, but those did not work either.

Thanks for any help you can offer.

[BlatantSquirrel]

loop:false,
navRewind:false
worked for me, but maybe the latest version of Owl doesn't have the following class in the css? .owl-theme .owl-controls .owl-nav .disabled{
opacity: 0.5;
cursor: default;
}

I've updated the options and added the class to the css in this JSfiddle - http://jsfiddle.net/a3wUL/16/

Hope that works for you.

[reymarth]

add css

.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
   display: none;
}

[Sumirmat97]

@reymarth It works! Thanks.

[kmrrajesh]

kj.njk