如何根据光滑的轮播宽度有条件地添加下一个和上一个箭头？

Question

当内容占用的 space 多于外部容器 (<div class="container">) 时，我正在尝试有条件地为 Slick Carousel (latest version) 添加下一个和上一个箭头。

示例：

内容适合容器（预期结果）

内容不适合容器（预期结果）

目标：

如果内容超出容器则添加箭头否则不要

这是我的设置，但无法有条件地添加箭头。

此代码突出显示了当前的结果和问题。
我尝试使用响应式设置，但如果遇到断点，它总是会添加箭头，这不是我想要的

$(function() {
  $('.carousel').slick({
    focusOnSelect: true,
    arrows: true,
    infinite: false,
    
    variableWidth: true,
    prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
                nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
  });
});

.carousel {
  color: black;
  display: block;
}

.carousel .item {
  border: 1px solid white;
  margin: 0 10px;
  padding: 5px;
}

.slick-list {
 width: auto;
 margin: 0 auto;
 height: auto;
}

.item.slick-current {
  border-bottom: 2px solid black;
}

.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="carousel">
        <div class="item">
          tab 1
        </div>
        <div class="item">
          tab 2
        </div>
        <div class="item">
          tab 3
        </div>
        <div class="item">
          tab 4
        </div>
        <div class="item">
          tab 5
        </div>
        <div class="item">
          tab 6
        </div>
      </div>

    </div>
  </div>
</div>

当前输出：

Answer 1

我找到了这个问题的答案。

$(function() {
  $('.carousel').slick({
    focusOnSelect: true,
    arrows: true,
    infinite: false,
    variableWidth: true,
    slidesToShow: 5,
    prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
                nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
  });
  var childrenWidth = 0;
  $('.carousel .slick-track').children().each(function() {
    childrenWidth += $(this).width();
  });
  var outerContainerWidth = $('.carousel').width();
 
  if(childrenWidth < outerContainerWidth) {
    var nextArrow = $('.next-arrow');
    if(!(nextArrow.hasClass('slick-disabled'))) {
      nextArrow.addClass('slick-disabled');
    }
  }
});

.carousel {
  color: black;
  display: block;
}

.carousel .item {
  border: 1px solid white;
  margin: 0 10px;
  padding: 5px;
}

.slick-list {
 width: auto;
 margin: 0 auto;
 height: auto;
}

.item.slick-current {
  border-bottom: 2px solid black;
}

.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="carousel">
        <div class="item">
          tab number 1
        </div>
        <div class="item">
          tab number 2
        </div>
        <div class="item">
          tab number 3
        </div>
        <div class="item">
          tab number 4
        </div>
        <div class="item">
          tab number 5
        </div>
        <div class="item">
          tab number 6
        </div>
      </div>

    </div>
  </div>
</div>

如何根据光滑的轮播宽度有条件地添加下一个和上一个箭头？

How to conditionally add next and prev arrows based on slick carousel width?

javascript

css

jquery

slick.js