Slick-slider进度条与分数计数在slidesToShow>1时计算异常

当将Slick滑块的slidesToShow参数设为1时，进度条指示器和分数计数显示正常；但设为2、3及以上数值时，进度条与分数计数均无法正确识别该参数：进度条接近满值时滑块已进入第二轮滚动，分数计数也存在同类错误。

HTML代码 #

<div class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
    <div class="slide">Slide 5</div>
    <div class="slide">Slide 6</div>
    <div class="slide">Slide 7</div>
</div>

<div class="slider-nav">
    <button class="prev-slide">Previous</button>
    <div class="progress-container">
        <div class="progressbar"></div>
    </div>
    <span class="fraction"></span>
    <button class="next-slide">Next</button>
</div>

CSS代码 #

.slider {
  width: 100%;
  overflow: hidden;
}

.slide {
  width: 100%;
}

.slider-nav {
  display: flex;
  justify-content: space-between;
}

.progress-container {
  width: 50%;
  height: 10px;
  border-radius: 8px;
  background-color: #ccc;
  overflow: hidden;
  margin: 0;
}

.progressbar {
  width: 0;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.5s;
}

.fraction {
  margin-left: 10px;
}

原问题JS代码 #

$(document).ready(function(){
  $('.slider').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    customPaging: function(slider, i) {
      return '<button class="tab">' + (i + 1) + '</button>';
    }
  });

  $('.prev-slide').click(function(){
    $('.slider').slick('slickPrev');
  });

  $('.next-slide').click(function(){
    $('.slider').slick('slickNext');
  });

  $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.fraction').text((nextSlide + 1) + '/' + slick.slideCount);
    var progress = (nextSlide + 1) / slick.slideCount * 100;
    $('.progressbar').css('width', progress + '%');
  });

  $('.fraction').text('1/' + $('.slider').slick('getSlick').slideCount);
  var slideCount = $('.slider').slick('getSlick').slideCount;
  var progress = (1 / slideCount) * 100;
  $('.progressbar').css('width', progress + '%');
});

问题核心在于：当slidesToShow>1时，滑块的有效分页数量不等于总幻灯片数，而是总幻灯片数 - slidesToShow + 1（最后一组需要完整显示设定数量的幻灯片）。原代码直接用单张幻灯片的索引和总幻灯片数计算，导致进度和计数错误。

修改后的JS代码如下：

$(document).ready(function(){
  $('.slider').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    customPaging: function(slider, i) {
      return '<button class="tab">' + (i + 1) + '</button>';
    }
  });

  $('.prev-slide').click(function(){
    $('.slider').slick('slickPrev');
  });

  $('.next-slide').click(function(){
    $('.slider').slick('slickNext');
  });

  // 计算有效分页总数
  function getTotalPages(slickInstance) {
    return slickInstance.slideCount - slickInstance.options.slidesToShow + 1;
  }

  $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    const totalPages = getTotalPages(slick);
    const currentPage = nextSlide + 1;
    $('.fraction').text(currentPage + '/' + totalPages);
    const progress = (currentPage / totalPages) * 100;
    $('.progressbar').css('width', progress + '%');
  });

  // 初始化进度和计数
  const slickInstance = $('.slider').slick('getSlick');
  const totalPages = getTotalPages(slickInstance);
  $('.fraction').text('1/' + totalPages);
  const initialProgress = (1 / totalPages) * 100;
  $('.progressbar').css('width', initialProgress + '%');
});

说明 #

1. 新增getTotalPages函数，根据总幻灯片数和slidesToShow计算有效分页总数；
2. 在beforeChange事件中，用当前幻灯片索引转换为当前页码，结合有效分页总数更新分数计数和进度条；
3. 初始化时也使用有效分页总数来设置初始状态。

这样无论slidesToShow设为多少，进度条和分数计数都会正确匹配滑块的实际分页情况。

内容的提问来源于stack exchange，提问作者Evgeniy Kozynchenko