如果旋转木马的项目少于 5 个，则隐藏导航按钮，但如果旋转木马的项目超过 5 个，则显示导航按钮- Owl 旋转木马 2

Question

如果旋转木马少于 5 个项目，我想隐藏导航按钮，但如果旋转木马超过 5 个项目，我想显示导航按钮- Owl 旋转木马 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

使用length获取轮播中的项目总数，即

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

然后检查是否超过5个项目，

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

旋转木马超过 5 个项目

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>

轮播少于 5 个项目

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>

如果旋转木马的项目少于 5 个，则隐藏导航按钮，但如果旋转木马的项目超过 5 个，则显示导航按钮- Owl 旋转木马 2

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

javascript

html

css

owl-carousel

HTML

JS