Slick slider progress bar doesn't match number of slides

Freddy 0
Viewed 58

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>

slick.js jquery javascript css
1 Answers

I think progress bar is working fine as of now in your code. For your 2nd point regarding transition smoothly, Please remove below CSS from your code and try. If you find useful then please upvote the answer. If you need any other help then please let me know. Thanks

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

Hi, 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,
  });
});
Nandan Rathod0
Related