如何根據圓滑的輪播寬度有條件地添加下一個和上一個箭頭？

Question

我嘗試有條件地為Slick Carousel（最新版​​本）添加下一個和上一個箭頭，當內容占用的空間比外部容器（ <div class="container"> ）更多時。

例：

1. 內容適合容器內（預期結果）

2. 內容不適合放入容器（預期結果）

目標：

• 如果內容溢出容器之外，請添加箭頭，否則不要

這是我設置的內容，但有條件地添加箭頭不起作用。

• 此代碼突出顯示了當前結果和問題。
• 我嘗試使用響應式設置，但是如果遇到斷點，它將始終添加箭頭，這不是我想要的

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