The slider progress bar does not match the number of slides-PHP Chinese Network Q&A

I have created a carousel containing 7 items.

By default, this carousel will display 5 items.

During my demo, I ran into two issues:

The slider is set to infinite loop, but when it returns to slide 1, the progress bar does not reset.
Once the slider reaches the end, it immediately jumps back to slide 1 (instead of a smooth transition).
Once the 7th slide (7th card) is visible, the progress bar should complete.

$slider.slick("getSlick").slideCount's console.log returns 7, which is the number of items in the slider. So not sure what is causing these issues.

(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, speed: 400, arrows: true, mobileFirst: true, }); })(jQuery);

.cardSlider { padding: 100px 0; background: black; color: white; } .card { color: black; padding: 50px; text-align: center; } .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: 5% 100%; transition: background-size 0.5s ease-in-out; } .progressBar__bar[aria-valuenow="0"] { background-size: 5% 100% !important; } .progressBar__bar[aria-valuenow] { height: 5px; } .progressBar__bar:before { content: ""; position: absolute; left: 0; top: 50%; transform: translate(0%, -50%); width: 100%; height: 0.5pt; background-color: white; } .slick-slide { margin: 0px 10px; display: none; float: left; height: 100%; min-height: 1px; outline: none !important; } .slick-slide.slick-loading { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-slide img { width: 100%; display: block; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-track, .slick-list { transform: translate3d(0, 0, 0); transition: all 150ms ease; } .slick-track { position: relative; top: 0; left: 0; align-items: center; width: 100%; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-initialized .slick-slide { display: block; }

          Card 1 
  Card 2 
  Card 3 
  Card 4 
  Card 5 
  Card 6 
  Card 7

renew

Please review the changes below. I've also attached the Codepen link here: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, }); });