Owl Carousel, Navigation Disabled After Reaching First/Last Item

Owl Carousel, navigation disabled after reaching first/last item

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/

How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?

Owl Carousel 2 provides a number of useful events which you can use to achieve this:

var $owl = $('.owl-carousel');

$owl.on('initialized.owl.carousel resized.owl.carousel', function(e) {
    $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size);
});

$owl.owlCarousel({ ... });

This snippet hooks into the initialized and resized events to trigger a function when the slideshow is first initialised or when the page is resized. The function compares how many elements are in your slideshow with the page size (the number of slides shown at once); if there are only enough items to display one page, the hide-nav class gets added to the slideshow. You can then use CSS to hide the nav elements:

.hide-nav .owl-controls {
    display: none;
}

If you add or remove slides or anything fancy like that, you might need to hook into additional events so your nav is displayed or hidden as appropriate: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

Owl carousel 2 navigation controls are hidden and disabled

Owl Carousel does not respect nav and navText when there is single item in container, but I had loop: true flag!! Thats why I expected it to work.

Code from sources:

Navigation.prototype.draw = function() {
    var difference,
        settings = this._core.settings,
        disabled = this._core.items().length <= settings.items,
        index = this._core.relative(this._core.current()),
        loop = settings.loop || settings.rewind;

    this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);

    if (settings.nav) {
        this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
        this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
    }

This line

disabled = this._core.items().length <= settings.items,

can be simplified to disabled = 1 <= 1 in my case.

So, in order to display "single" item in owl carousel and still show controls, I have to put at least two items in container

<div class="owl-carousel quote-carousel">
    <div class="quote-item" style="background-image: url('/images/landing/profile.png')">
        <div class="quote-text">"Where are navigation controls??"</div>
        <div class="quote-name">John Doe, Hampshire</div>
    </div>
    <div class="quote-item" style="background-image: url('/images/landing/profile.png')">
        <div class="quote-text">"Where are navigation controls??"</div>
        <div class="quote-name">John Doe, Hampshire</div>
    </div>
</div>

Hide navigation buttons if carousel has less than 5 items but shows navigation buttons if carousel has more than 5 item- Owl Carousel 2

Get total number of items in a carousel by using length, That is

var count = $('.owl-carousel .item').length;

Then check if more than 5 items,

 if(count>5){
   // more than 5 items
 }
 else{
   // less than 5 items
 }

Carousel Having more than 5 items

var count = $('.owl-carousel .item').length;
if(count>5){
  $('.owl-carousel').owlCarousel({
   loop:false,
   rewind:true,
   nav:true,
   dots:false,
   autoplay:false,
   responsiveClass:true,
   responsive:{
      0:{
          items:1,
          nav:true
      },
      600:{
          items:3,
          nav:true
      },
      1000:{
          items:5,
          nav:true,
      },
    }
  })
}else{
    $('.owl-carousel').owlCarousel({
   loop:false,
   rewind:true,
   nav:false,
   dots:false,
   autoplay:false,
   responsiveClass:true,
   responsive:{
      0:{
          items:1,
          nav:false
      },
      600:{
          items:3,
          nav:false
      },
      1000:{
          items:5,
          nav:false,
      },
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<div class="owl-carousel owl-theme">
   <div class="item"><h4>1</h4></div>
   <div class="item"><h4>2</h4></div>
   <div class="item"><h4>3</h4></div>
   <div class="item"><h4>4</h4></div>
   <div class="item"><h4>5</h4></div>
   <div class="item"><h4>6</h4></div>
   <div class="item"><h4>7</h4></div>
   <div class="item"><h4>8</h4></div>
   <div class="item"><h4>9</h4></div>
   <div class="item"><h4>10</h4></div>
</div>

jQuery("#sliderwhat").owlCarousel({

        navigation : false, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

    });
  }