Der Fortschrittsbalken des Schiebereglers stimmt nicht mit der Anzahl der Folien überein
P粉587780103
2023-08-25 16:17:45
<p>Ich habe ein Karussell mit <code>7</code>-Elementen erstellt. </p>
<p>Standardmäßig werden in diesem Karussell <code>5</code>-Elemente angezeigt. </p>
<p>Während meiner Demo stieß ich auf zwei Probleme: </p>
<ol>
<li>Der Schieberegler ist auf <code>Endlosschleife</code> eingestellt, aber wenn er zu Folie 1 zurückkehrt, wird der Fortschrittsbalken nicht zurückgesetzt. </li>
<li>Sobald der Schieberegler das Ende erreicht, springt er sofort zurück zu Folie 1 (anstelle eines fließenden Übergangs). </li>
<li>Sobald die 7. Folie (7. Karte) sichtbar ist, sollte der Fortschrittsbalken abgeschlossen sein. </li>
</ol>
<p><code>$slider.slick("getSlick").slideCount</code>s <code>console.log</code> gibt 7 zurück, was der Anzahl der Elemente im Schieberegler entspricht. Ich bin mir also nicht sicher, was diese Probleme verursacht.</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,
Geschwindigkeit: 400,
Pfeile: wahr,
mobileFirst: wahr,
});
})(jQuery);</pre>
<pre class="brush:css;toolbar:false;">.cardSlider {
Polsterung: 100px 0;
Hintergrund: schwarz;
Farbe weiß;
}
.card {
Farbe: Schwarz;
Polsterung: 50px;
Textausrichtung: Mitte;
}
.progressBar__bar {
Rand oben: 82px;
Position: relativ;
Bildschirmsperre;
Breite: 100 %;
Höhe: 3px;
Überlauf versteckt;
Hintergrundbild: linearer Farbverlauf (nach rechts, gelb, gelb);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 5 % 100 %;
Übergang: Hintergrundgröße 0,5 Sek. Easy-In-Out;
}
.progressBar__bar[aria-valuenow="0"] {
Hintergrundgröße: 5 % 100 % !important;
}
.progressBar__bar[aria-valuenow] {
Höhe: 5px;
}
.progressBar__bar:before {
Inhalt: "";
Position: absolut;
links: 0;
oben: 50 %;
transform: Translate(0%, -50%);
Breite: 100 %;
Höhe: 0,5pt;
Hintergrundfarbe: weiß;
}
.slick-slide {
Rand: 0px 10px;
Anzeige: keine;
schweben: links;
Höhe: 100 %;
Mindesthöhe: 1 Pixel;
Gliederung: keine !important;
}
.slick-slide.slick-loading {
Anzeige: keine;
}
.slick-slide.dragging img {
Zeigerereignisse: keine;
}
.slick-slide img {
Breite: 100 %;
Bildschirmsperre;
}
.slick-slider {
Position: relativ;
Bildschirmsperre;
Boxgröße: border-box;
-webkit-touch-callout: keine;
-khtml-user-select: keine;
Touch-Aktion: Pan-Y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
Position: relativ;
Bildschirmsperre;
Überlauf versteckt;
Rand: 0;
Polsterung: 0;
}
.slick-list:focus {
Gliederung: keine;
}
.slick-list.dragging {
Cursor: Zeiger;
Cursor: Hand;
}
.slick-track,
.slick-list {
transform: Translate3d(0, 0, 0);
Übergang: alle 150 ms Ease;
}
.slick-track {
Position: relativ;
oben: 0;
links: 0;
align-items: center;
Breite: 100 %;
}
.slick-track:before,
.slick-track:after {
Anzeige: Tisch;
Inhalt: "";
}
.slick-track:after {
Lösche beide;
}
.slick-initialized .slick-slide {
Bildschirmsperre;
}</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">
Karte 1
</article>
<article class="card">
Karte 2
</article>
<article class="card">
Karte 3
</article>
<article class="card">
Karte 4
</article>
<article class="card">
Karte 5
</article>
<article class="card">
Karte 6
</article>
<article class="card">
Karte 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>
我认为进度条在你的代码中目前工作得很好。
对于你提到的平滑过渡的第二点，请从你的代码中删除以下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, }); });