滑块进度条与幻灯片数量不相符

Question

<p>我已经创建了一个包含<code>7</code>个项目的轮播。</p> <p>默认情况下，此轮播将展示<code>5</code>个项目。</p> <p>在我的演示中，我遇到了两个问题：</p> <ol> <li>滑块被设置为<code>无限循环</code>，但是当它返回到第1个幻灯片时，进度条不会重置。</li> <li>一旦滑块到达末尾，它会立即跳回第1个幻灯片（而不是平滑过渡）。</li> <li>一旦第7个幻灯片（第7个卡片）可见，进度条应该完成。</li> </ol> <p><code>$slider.slick("getSlick").slideCount</code>的<code>console.log</code>返回7，这是滑块中的项目数量。所以不确定是什么原因导致这些问题。</p> <p></p>

(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({
    幻灯片显示：5，
    幻灯片滚动：1，
    速度：400，
    箭头：正确，
    移动优先：正确，
  });


})(jQuery);</pre>
.cardSlider {
  内边距：100px 0；
  背景：黑色；
  白颜色;
}

。卡片 {
  颜色：黑色;
  内边距：50px；
  文本对齐：居中；
}

.progressBar__bar {
  顶部边距：82px；
  位置：相对；
  显示：块；
  宽度：100%；
  高度：3px；
  溢出：隐藏；
  背景图像：线性渐变（向右、黄色、黄色）；
  背景重复：不重复；
  背景大小：5% 100%；
  过渡：背景大小 0.5 秒缓入缓出；
}

.progressBar__bar[aria-valuenow="0"] {
  背景大小：5% 100%！重要；
}

.progressBar__bar[aria-valuenow] {
  高度：5px；
}

.progressBar__bar:之前{
  内容： ””;
  位置：绝对；
  左：0；
  顶部：50%；
  变换：翻译（0%，-50%）；
  宽度：100%；
  高度：0.5pt；
  背景颜色：白色；
}

.slick-slide {
  边距：0px 10px；
  显示：无；
  向左飘浮;
  高度：100%；
  最小高度：1px；
  大纲：无！重要；
}

.slick-slide.slick-loading {
  显示：无；
}

.slick-slide.dragging img {
  指针事件：无；
}

.slick-slide img {
  宽度：100%；
  显示：块；
}

.slick-slider {
  位置：相对；
  显示：块；
  框大小：边框框；
  -webkit-touch-callout：无；
  -khtml-用户选择：无；
  触摸动作：pan-y；
  -webkit-tap-highlight-color：透明；
}

.slick-list {
  位置：相对；
  显示：块；
  溢出：隐藏；
  保证金：0；
  填充：0；
}

.slick-list:焦点{
  概要：无；
}

.slick-list.dragging {
  光标：指针；
  光标：手；
}

.光滑的轨道，
.slick-list {
  变换：translate3d(0, 0, 0);
  过渡：全部 150ms 缓和；
}

.slick-track {
  位置：相对；
  顶部：0；
  左：0；
  对齐项目：居中；
  宽度：100%；
}

.slick-track：之前，
.slick-track:之后{
  显示：表；
  内容： ””;
}

.slick-track:之后{
  明确：两者；
}

.slick-初始化 .slick-slide {
  显示：块；
}</前>
<脚本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</脚本>
<脚本 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"/>

<节类=“cardSlider”>
  


    <div class="row">
      <div class="col-12">
        
;

          <文章类=“卡片”>
            卡1
          </文章>

          <文章类=“卡片”>
            卡2
          </文章>

          <文章类=“卡片”>
            卡3
          </文章>

          <文章类=“卡片”>
            卡4
          </文章>

          <文章类=“卡片”>
            卡5
          </文章>

          <文章类=“卡片”>
            卡6
          </文章>

          <文章类=“卡片”>
            卡7
          </文章>

        
      
    

Answer 1

我认为进度条在你的代码中目前工作得很好。

对于你提到的平滑过渡的第二点，请从你的代码中删除以下CSS并尝试。

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

更新

请查看以下更改。我也在这里附上了Codepen链接：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,
  });
});