Bar kemajuan peluncur tidak sepadan dengan bilangan slaid

Question

Saya telah mencipta karusel yang mengandungi 7

Secara lalai, karusel ini akan memaparkan 5

Semasa demo saya, saya menghadapi dua isu:

1. Gelangsar ditetapkan kepada gelung tak terhingga, tetapi apabila ia kembali ke slaid 1, bar kemajuan tidak ditetapkan semula.
2. Sebaik sahaja peluncur sampai ke penghujung, ia serta-merta melompat kembali ke slaid 1 (bukan peralihan yang lancar).
3. Setelah slaid ke-7 (kad ke-7) kelihatan, bar kemajuan akan selesai.

$slider.slick("getSlick").slideCount's console.log Jadi tidak pasti apa yang menyebabkan masalah ini.

(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('saiz latar belakang', calc + '% 100%').attr('aria-valuenow', calc);
  });

  $slider.slick({
    slaidToShow: 5,
    slaidToScroll: 1,
    kelajuan: 400,
    anak panah: benar,
    mobileFirst: benar,
  });


})(jQuery);

.cardSlider {
  pelapik: 100px 0;
  latar belakang: hitam;
  warna: putih;
}

.card {
  warna: hitam;
  padding: 50px;
  text-align: tengah;
}

.progressBar__bar {
  jidar atas: 82px;
  kedudukan: relatif;
  paparan: blok;
  lebar: 100%;
  ketinggian: 3px;
  limpahan: tersembunyi;
  imej latar belakang: kecerunan linear (ke kanan, kuning, kuning);
  background-repeat: tidak-ulang;
  saiz latar belakang: 5% 100%;
  peralihan: saiz latar belakang 0.5s mudah masuk;
}

.progressBar__bar[aria-valuenow="0"] {
  saiz latar belakang: 5% 100% !penting;
}

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

.progressBar__bar:sebelum {
  kandungan: "";
  jawatan: mutlak;
  kiri: 0;
  atas: 50%;
  mengubah: terjemah(0%, -50%);
  lebar: 100%;
  ketinggian: 0.5pt;
  warna latar belakang: putih;
}

.slick-slide {
  jidar: 0px 10px;
  paparan: tiada;
  terapung: kiri;
  ketinggian: 100%;
  ketinggian min: 1px;
  garis besar: tiada !penting;
}

.slick-slide.slick-loading {
  paparan: tiada;
}

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

.slick-slide img {
  lebar: 100%;
  paparan: blok;
}

.slick-slider {
  kedudukan: relatif;
  paparan: blok;
  saiz kotak: kotak sempadan;
  -webkit-touch-callout: tiada;
  -khtml-user-select: tiada;
  sentuhan-tindakan: pan-y;
  -webkit-tap-highlight-color: lutsinar;
}

.slick-list {
  kedudukan: relatif;
  paparan: blok;
  limpahan: tersembunyi;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  garis besar: tiada;
}

.slick-list.dragging {
  kursor: penunjuk;
  kursor: tangan;
}

.slick-track,
.slick-list {
  transform: translate3d(0, 0, 0);
  peralihan: semua 150ms mudah;
}

.slick-track {
  kedudukan: relatif;
  atas: 0;
  kiri: 0;
  align-item: tengah;
  lebar: 100%;
}

.slick-track:sebelum ini,
.slick-track:selepas {
  paparan: meja;
  kandungan: "";
}

.slick-track:selepas {
  jelas: kedua-duanya;
}

.slick-initialized .slick-slide {
  paparan: blok;
}</pra>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<pautan href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<pautan 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">
            Kad 1
          </article>

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

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

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

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

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

          <article class="card">
            Kad 7
          </artikel>

        </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

Saya rasa bar kemajuan pada masa ini berfungsi dengan baik dalam kod anda.

Untuk perkara kedua yang anda nyatakan tentang peralihan yang lancar, sila alih keluar CSS berikut daripada kod anda dan cuba.

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

Kemas kini

Sila semak perubahan di bawah. Saya juga telah melampirkan pautan Codepen di sini: 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,
  });
});