スライダーの進行状況バーがスライドの数と一致しません

Question

7 項目を含むカルーセルを作成しました。

デフォルトでは、このカルーセルには 5 アイテムが表示されます。

デモ中に 2 つの問題に遭遇しました:

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({
    表示するスライド: 5、
    スクロールするスライド: 1、
    スピード: 400、
    矢印: true、
    mobileFirst: true、
  });


})(jQuery);
<pre class="brush:css;toolbar:false;">.cardSlider {
  パディング: 100px 0;
  背景: 黒;
  色: 白;
}

.card {
  色: 黒;
  パディング: 50ピクセル;
  テキスト整列: 中央;
}

.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-user-select: なし;
  タッチアクション: パンy;
  -webkit-tap-highlight-color: 透明;
}

.slick-list {
  位置: 相対的;
  表示ブロック;
  オーバーフロー: 非表示;
  マージン: 0;
  パディング: 0;
}

.slick-list:focus {
  概要: なし。
}

.slick-list.dragging {
  カーソル: ポインタ;
  カーソル: 手;
}

.スリックトラック、
.slick-list {
  変換：translate3d(0, 0, 0);
  トランジション: すべて 150 ミリ秒の緩和。
}

.slick-track {
  位置: 相対的;
  トップ: 0;
  左: 0;
  整列項目: 中央;
  幅: 100%;
}

.slick-track:前、
.slick-track:after {
  表示: テーブル;
  コンテンツ： "";
}

.slick-track:after {
  クリア：両方。
}

.slick-initialized .slick-slide {
  表示ブロック;
}

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

<セクションクラス="カードスライダー">
  <div class="コンテナ">

    <div class="行">
      <div class="col-12">
        <div class="cardSlider__listing" id="スライダー">

          <記事クラス="カード">
            カード1
          </記事>

          <記事クラス="カード">
            カード2
          </記事>

          <記事クラス="カード">
            カード3
          </記事>

          <記事クラス="カード">
            カード4
          </記事>

          <記事クラス="カード">
            カード5
          </記事>

          <記事クラス="カード">
            カード6
          </記事>

          <記事クラス="カード">
            カード7
          </記事>

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

    <div class="行">
      <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>

Answer 1

進行状況バーは現在、コード内で正常に機能していると思います。

スムーズな移行に関する 2 番目の点については、コードから次の CSS を削除して試してください。

リーリー

更新

以下の変更点を確認してください。 Codepen のリンクもここに添付しました: https://codepen.io/nandu1993/pen/xxjdZjd

リーリー