<p><code>7</code> 項目を含むカルーセルを作成しました。 </p> <p>デフォルトでは、このカルーセルには <code>5</code> アイテムが表示されます。 </p> <p>デモ中に 2 つの問題に遭遇しました:</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> <pre class="brush:js;toolbar:false;">(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 { 表示ブロック; }</pre> <pre class="brush:html;toolbar:false;"><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></pre>