Bar kemajuan peluncur tidak sepadan dengan bilangan slaid-Soal Jawab Rangkaian PHP Cina

Saya telah mencipta karusel yang mengandungi 7

Secara lalai, karusel ini akan memaparkan 5

Semasa demo saya, saya menghadapi dua isu:

Gelangsar ditetapkan kepada gelung tak terhingga, tetapi apabila ia kembali ke slaid 1, bar kemajuan tidak ditetapkan semula.
Sebaik sahaja peluncur sampai ke penghujung, ia serta-merta melompat kembali ke slaid 1 (bukan peralihan yang lancar).
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; }          Kad 1 
  Kad 2 
  Kad 3 
  Kad 4 
  Kad 5 
  Kad 6 
  Kad 7

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