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

Question

I want to hide navigation buttons if carousel has fewer than 5 items but shows navigation buttons if carousel has more than 5 items- Owl Carousel 2

HTML

<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 class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

JS

$('.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,
        },
    }
})

Answer 1

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>

Carousel having less 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>