滑桿進度條與投影片數量不相符

Question

<p>我已經建立了一個包含<code>7</code>個專案的輪播。 </p> <p>預設情況下，此輪播將顯示<code>5</code>個項目。 </p> <p>在我的演示中，我遇到了兩個問題：</p> <ol> <li>滑桿被設定為<code>無限循環</code>，但當它回到第1張投影片時，進度條不會重設。 </li> <li>一旦滑桿到達末尾，它會立即跳回第1張幻燈片（而不是平滑過渡）。 </li> <li>一旦第7張投影片（第7張卡片）可見，進度條應該完成。 </li> </ol> <p><code>$slider.slick("getSlick").slideCount</code>的<code>console.log</code>回傳7，這是滑桿中的項目數。所以不確定是什麼原因導致這些問題。</p> <p></p>

(function($) {

  const $slider = $('#slider');
  var $progressBar = $('.progressBar__bar');

  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
    $progressBar.css('background-size', calc '% 100%').attr('aria-valuenow', calc);
  });

  $slider.slick({
    投影片顯示：5，
    幻燈片滾動：1，
    速度：400，
    箭頭：正確，
    行動優先：正確，
  });


})(jQuery);</pre>
<pre class="brush:css;toolbar:false;">.cardSlider {
  內邊距：100px 0；
  背景：黑色；
  白顏色;
}

。卡片 {
  顏色：黑色;
  內邊距：50px；
  文字對齊：居中；
}

.progressBar__bar {
  上邊距：82px；
  位置：相對；
  顯示：塊；
  寬度：100%；
  高度：3px；
  溢出：隱藏；
  背景影像：線性漸層（向右、黃色、黃色）；
  背景重複：不重複；
  背景大小：5% 100%；
  過渡：背景大小 0.5 秒緩入緩出；
}

.progressBar__bar[aria-valuenow="0"] {
  背景大小：5% 100%！重要；
}

.progressBar__bar[aria-valuenow] {
  高度：5px；
}

.progressBar__bar:之前{
  內容： ””;
  位置：絕對；
  左：0；
  頂部：50%；
  變換：翻譯（0%，-50%）；
  寬度：100%；
  高度：0.5pt；
  背景顏色：白色；
}

.slick-slide {
  邊距：0px 10px；
  顯示：無；
  向左飄浮;
  高度：100%；
  最小高度：1px；
  大綱：無！重要；
}

.slick-slide.slick-loading {
  顯示：無；
}

.slick-slide.dragging img {
  指針事件：無；
}

.slick-slide img {
  寬度：100%；
  顯示：塊；
}

.slick-slider {
  位置：相對；
  顯示：塊；
  框大小：邊框框；
  -webkit-touch-callout：無；
  -khtml-使用者選擇：無；
  觸摸動作：pan-y；
  -webkit-tap-highlight-color：透明；
}

.slick-list {
  位置：相對；
  顯示：塊；
  溢出：隱藏；
  保證金：0；
  填充：0；
}

.slick-list:焦點{
  概要：無；
}

.slick-list.dragging {
  遊標：指針；
  遊標：手；
}

.光滑的軌道，
.slick-list {
  變換：translate3d(0, 0, 0);
  過渡：全部 150ms 輕鬆；
}

.slick-track {
  位置：相對；
  頂部：0；
  左：0；
  對齊項目：居中；
  寬度：100%；
}

.slick-track：之前，
.slick-track:之後{
  顯示：表；
  內容： ””;
}

.slick-track:之後{
  明確：兩者；
}

.slick-初始化 .slick-slide {
  顯示：塊；
}</前>
<pre class="brush:html;toolbar:false;"><腳本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;< /腳本>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>

<節類=“cardSlider”>
  <div class="容器">

    <div class="row">
      <div class="col-12">
        <div class="cardSlider__listing" id="slider">;

          <文章類=「卡片」>
            卡1
          </文章>

          <文章類=「卡片」>
            卡2
          </文章>

          <文章類=「卡片」>
            卡3
          </文章>

          <文章類=「卡片」>
            卡4
          </文章>

          <文章類=「卡片」>
            卡5
          </文章>

          <文章類=「卡片」>
            卡6
          </文章>

          <文章類=「卡片」>
            卡7
          </文章>

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

Answer 1

我認為進度條在你的程式碼中目前工作得很好。

對於你提到的平滑過渡的第二點，請從你的程式碼中刪除以下CSS並嘗試。

.slick-track,.slick-list {
   transform: translate3d(0, 0, 0);
  transition: all 150ms ease;
}

更新

請查看以下變更。我也在這裡附上了Codepen連結：https://codepen.io/nandu1993/pen/xxjdZjd

.progressBar__bar {
  margin-top: 82px;
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background-image: linear-gradient(to right, yellow, yellow);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s ease-in-out;
}



$(document).ready(function () {

  const slider = $('#slider');
  var progressBar = $('.progressBar__bar');
  //for first time load
  slider.on('init', function (event, slick, currentSlide, nextSlide) {
    currentDot = $(".slick-dots .slick-active").index() + 1;
    dots = slider.find('.slick-dots li').length;
    calc = (currentDot / dots) * 100;
    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.on('afterChange', function (event, slick, currentSlide, nextSlide) {
    var currentDot = $(".slick-dots .slick-active").index() + 1;
    var dots = slider.find('.slick-dots li').length;
    var calc = (currentDot / dots) * 100;

    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    autoplay: false,
    arrows: true,
    mobileFirst: true,
  });
});