Slick slider progress bar doesn't match number of slides

Question

I have created a carousel which contains 7 items in total.

This carousel will showcase 5 by default.

In my demo, I'm having two issues:

1. The slider is set to infinite, however, the progress bar does not reset when it have gone back to slide 1.
2. Once the slider has reached the end, it just jumps back onto slide 1 (rather than transition smoothly)
3. Once slide 7 (card 7) is in view, then the progress bar should be complete

A console.log of $slider.slick("getSlick").slideCount returns 7, which is the correct amount of items in the slider. So unsure 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;
}

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

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

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

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

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

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

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

I think progress bar is working fine as of now in your code.

For your second point regarding transition smoothly, Please remove below CSS from your code and try.

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

Update

Please check below changes also. I am also attaching Codepen link over 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,
  });
});