The slider progress bar does not match the number of slides

Question

I have created a carousel containing 7 items.

By default, this carousel will display 5 items.

During my demo, I ran into two issues:

1. The slider is set to infinite loop, but when it returns to slide 1, the progress bar does not reset.
2. Once the slider reaches the end, it immediately jumps back to slide 1 (instead of a smooth transition).
3. 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;
}

<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 the progress bar is currently working fine in your code.

For the second point you mentioned about smooth transition, please remove the following CSS from your code and try it.

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

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