滑桿進度條與投影片數量不相符
P粉587780103
P粉587780103 2023-08-25 16:17:45
0
1
651
<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 </文章>
<div class="row"> <div class="col-12"> <div class="progressBar"> <div class="progressBar__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</節></pre>
1
0
0
P粉587780103
P粉587780103

全部回覆(1)
P粉865900994

我認為進度條在你的程式碼中目前工作得很好。

對於你提到的平滑過渡的第二點,請從你的程式碼中刪除以下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,
  });
});
熱門專題
更多>
熱門文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板