Der Fortschrittsbalken des Schiebereglers stimmt nicht mit der Anzahl der Folien überein

Question

Ich habe ein Karussell mit 7-Elementen erstellt.

Standardmäßig werden in diesem Karussell 5-Elemente angezeigt.

Während meiner Demo stieß ich auf zwei Probleme:

1. Der Schieberegler ist auf Endlosschleife eingestellt, aber wenn er zu Folie 1 zurückkehrt, wird der Fortschrittsbalken nicht zurückgesetzt.
2. Sobald der Schieberegler das Ende erreicht, springt er sofort zurück zu Folie 1 (anstelle eines fließenden Übergangs).
3. Sobald die 7. Folie (7. Karte) sichtbar ist, sollte der Fortschrittsbalken abgeschlossen sein.

$slider.slick("getSlick").slideCounts console.log gibt 7 zurück, was der Anzahl der Elemente im Schieberegler entspricht. Ich bin mir also nicht sicher, was diese Probleme verursacht.

(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,
    Geschwindigkeit: 400,
    Pfeile: wahr,
    mobileFirst: wahr,
  });


})(jQuery);

.cardSlider {
  Polsterung: 100px 0;
  Hintergrund: schwarz;
  Farbe weiß;
}

.card {
  Farbe: Schwarz;
  Polsterung: 50px;
  Textausrichtung: Mitte;
}

.progressBar__bar {
  Rand oben: 82px;
  Position: relativ;
  Bildschirmsperre;
  Breite: 100 %;
  Höhe: 3px;
  Überlauf versteckt;
  Hintergrundbild: linearer Farbverlauf (nach rechts, gelb, gelb);
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundgröße: 5 % 100 %;
  Übergang: Hintergrundgröße 0,5 Sek. Easy-In-Out;
}

.progressBar__bar[aria-valuenow="0"] {
  Hintergrundgröße: 5 % 100 % !important;
}

.progressBar__bar[aria-valuenow] {
  Höhe: 5px;
}

.progressBar__bar:before {
  Inhalt: "";
  Position: absolut;
  links: 0;
  oben: 50 %;
  transform: Translate(0%, -50%);
  Breite: 100 %;
  Höhe: 0,5pt;
  Hintergrundfarbe: weiß;
}

.slick-slide {
  Rand: 0px 10px;
  Anzeige: keine;
  schweben: links;
  Höhe: 100 %;
  Mindesthöhe: 1 Pixel;
  Gliederung: keine !important;
}

.slick-slide.slick-loading {
  Anzeige: keine;
}

.slick-slide.dragging img {
  Zeigerereignisse: keine;
}

.slick-slide img {
  Breite: 100 %;
  Bildschirmsperre;
}

.slick-slider {
  Position: relativ;
  Bildschirmsperre;
  Boxgröße: border-box;
  -webkit-touch-callout: keine;
  -khtml-user-select: keine;
  Touch-Aktion: Pan-Y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  Position: relativ;
  Bildschirmsperre;
  Überlauf versteckt;
  Rand: 0;
  Polsterung: 0;
}

.slick-list:focus {
  Gliederung: keine;
}

.slick-list.dragging {
  Cursor: Zeiger;
  Cursor: Hand;
}

.slick-track,
.slick-list {
  transform: Translate3d(0, 0, 0);
  Übergang: alle 150 ms Ease;
}

.slick-track {
  Position: relativ;
  oben: 0;
  links: 0;
  align-items: center;
  Breite: 100 %;
}

.slick-track:before,
.slick-track:after {
  Anzeige: Tisch;
  Inhalt: "";
}

.slick-track:after {
  Lösche beide;
}

.slick-initialized .slick-slide {
  Bildschirmsperre;
}

<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">
            Karte 1
          </article>

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

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

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

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

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

          <article class="card">
            Karte 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>

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,
  });
});