我已经创建了一个包含7个项目的轮播。

默认情况下，此轮播将展示5个项目。

在我的演示中，我遇到了两个问题：

1. 滑块被设置为无限循环，但是当它返回到第1个幻灯片时，进度条不会重置。
2. 一旦滑块到达末尾，它会立即跳回第1个幻灯片（而不是平滑过渡）。
3. 一旦第7个幻灯片（第7个卡片）可见，进度条应该完成。

$slider.slick("getSlick").slideCount的console.log返回7，这是滑块中的项目数量。所以不确定是什么原因导致这些问题。

(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({
    slidesToShow: 5,
    slidesToScroll: 1,
    speed: 400,
    arrows: true,
    mobileFirst: true,
  });


})(jQuery);

.cardSlider {
  padding: 100px 0;
  background: black;
  color: white;
}

.card {
  color: black;
  padding: 50px;
  text-align: center;
}

.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: 5% 100%;
  transition: background-size 0.5s ease-in-out;
}

.progressBar__bar[aria-valuenow="0"] {
  background-size: 5% 100% !important;
}

.progressBar__bar[aria-valuenow] {
  height: 5px;
}

.progressBar__bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  height: 0.5pt;
  background-color: white;
}

.slick-slide {
  margin: 0px 10px;
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: none !important;
}

.slick-slide.slick-loading {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-slide img {
  width: 100%;
  display: block;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

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

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  align-items: center;
  width: 100%;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-initialized .slick-slide {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script 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"/>

<section class="cardSlider">
  <div class="container">

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

          <article class="card">
            Card 1
          </article>

          <article class="card">
            Card 2
          </article>

          <article class="card">
            Card 3
          </article>

          <article class="card">
            Card 4
          </article>

          <article class="card">
            Card 5
          </article>

          <article class="card">
            Card 6
          </article>

          <article class="card">
            Card 7
          </article>

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

    <div class="row">
      <div class="col-12">
        <div class="progressBar">
          <div class="progressBar__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>

  </div> 
</section>