Hide Nav Arrows When Owl Carousel Has Less Than 3 Item Using JS

 Hide Nav Arrows

We all are familiar with Owl Carousel, I hope! Now, default behavior of Owl carousel is: it always displays nav arrows irrespective of number of items. There is a possibility that carousel have less number(s) of item(s) on screen and there is no scroll behaviour, yet arrows are always displayed.

Follow below code to hide the arrows if there are less number of items in carousel:

JS code - For Desktop:

jQuery(document).ready(function() {
  // Calculate number of Slides
  var totalItems = $('.item').length;


  // If there is only three slides
  if (totalItems == 3) {
    // Set loop option variable to false
    var isLooped = false;
    // Set nav option variable to false
    var isNav = false;
  } 
  else {
    // Set loop option variable to true
    var isLooped = true;


    // Set loop option variable to true
    var isNav = true;
  }


  // Initiate Carousel
  $('.owl-carousel').owlCarousel({
      //add in your dynamic variables to your options
      loop: isLooped,
      nav:isNav,
      // then any other options...
      margin:0,
      video:true,
      autoplay:true,
      autoplayTimeout:3500,
      autoplayHoverPause:true,
      navSpeed:1300,
      autoplaySpeed:1300,
      responsive:{
        0:{
            items:1
        },
        767:{
            items:1
        },
        1000:{
            items:3
        }
      }
  });
});

For iPad:

// If there is only two slides
  if (totalItems == 2) {
    // Set loop option variable to false
    var isLooped = false;
    // Set nav option variable to false
    var isNav = false;
  } 
  else {
    // Set loop option variable to true
    var isLooped = true;


    // Set loop option variable to true
    var isNav = true;
  }

For mobile:

// If there is only one slide
  if (totalItems == 1) {
    // Set loop option variable to false
    var isLooped = false;
    // Set nav option variable to false
    var isNav = false;
  } 
  else {
    // Set loop option variable to true
    var isLooped = true;


    // Set loop option variable to true
    var isNav = true;
  }

We faced this issue in one of our projects and hope this would help you all. Feel free to add comments and inputs. Always open to new ideas and implementation for Quality Web Design Services. #letstalksolution