Owlcarousel2: Missing "disabled" classes for prev/next navigation links

Created on 10 Jun 2014  路  4Comments  路  Source: OwlCarousel2/OwlCarousel2

Just like in a topic - there are no "disabled" classes, when OwlCarousel works in "loop: false" mode.

bug

Most helpful comment

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

All 4 comments

+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.

Was this page helpful?
0 / 5 - 0 ratings