滑块进度条与幻灯片数量不相符
P粉587780103
2023-08-25 16:17:45
<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>
<pre class="brush:js;toolbar:false;">(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);</pre>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我认为进度条在你的代码中目前工作得很好。
对于你提到的平滑过渡的第二点，请从你的代码中删除以下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, }); });