滑块进度条与幻灯片数量不相符-PHP中文网问答

我已经创建了一个包含7个项目的轮播。

默认情况下，此轮播将展示5个项目。

在我的演示中，我遇到了两个问题：

滑块被设置为无限循环，但是当它返回到第1个幻灯片时，进度条不会重置。
一旦滑块到达末尾，它会立即跳回第1个幻灯片（而不是平滑过渡）。
一旦第7个幻灯片（第7个卡片）可见，进度条应该完成。

$slider.slick("getSlick").slideCount的console.log返回7，这是滑块中的项目数量。所以不确定是什么原因导致这些问题。

(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);

.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">  
          <节类=“cardslider”>
           
             
            
             ;
             <文章类=“卡片”>
              卡1 
              <文章类=“卡片”>
               卡2 
               <文章类=“卡片”>
                卡3 
                <文章类=“卡片”>
                 卡4 
                 <文章类=“卡片”>
                  卡5 
                  <文章类=“卡片”>
                   卡6 
                   <文章类=“卡片”>
                    卡7

更新

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