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

Question

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

例子:

1. 内容适合容器(预期结果)

1. 内容不适合容器(预期结果)

目标:

• 如果内容溢出容器则添加箭头，否则不添加

这是我的设置，但有条件地添加箭头不起作用。

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

$(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>