帶有進度欄的進度條作為輪播指標

Question

我正在嘗試使用Boostrap 4傳送帶創建帶有步驟的進度欄。 這是我要實現的目標的圖像。 如圖所示，Bootstrap傳送帶和下方的進度條。 我設法創建了一個不同步的進度條，但這是我解決方案的方向。 這是我的嘗試： https : //jsfiddle.net/vrzmux4d/3/ 2

 var progress = setInterval(function() { var progressbar = $('.progress-bar'); var current = progressbar.width(); if (progressbar.width() >= 1000) { clearInterval(progress); $('.progress-bar').removeClass('active'); } else { progressbar.width(progressbar.width() + 1); } progressbar.text(progressbar.width() + " px"); if (current >= 0) { $('.one').removeClass('no-color').addClass('primary-color'); } if (current >= 115) { $('.two').removeClass('no-color').addClass('primary-color'); } if (current >= 220) { $('.three').removeClass('no-color').addClass('primary-color'); } if (current >= 320) { $('.four').removeClass('no-color').addClass('primary-color'); } if (current >= 420) { $('.five').removeClass('no-color').addClass('primary-color'); } if (current >= 520) { $('.six').removeClass('no-color').addClass('primary-color'); } if (current >= 620) { $('.seven').removeClass('no-color').addClass('primary-color'); } if (current >= 720) { $('.eight').removeClass('no-color').addClass('primary-color'); } if (current >= 820) { $('.nine').removeClass('no-color').addClass('primary-color'); } if (current >= 920) { $('.ten').removeClass('no-color').addClass('primary-color'); } }, 45); $('.carousel').carousel({ interval: 1000 }); 

 .progress.active .progress-bar { -webkit-transition: none !important; transition: none !important; width: 1000px; } .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten { position: absolute; margin-top: -1px; margin-right: -300px; z-index: 1; height: 15px; width: 15px; border-radius: 50%; } .one { left: 0%; } .two { left: 10.94%; } .three { left: 21.88%; } .four { left: 32.82%; } .five { left: 43.76%; } .six { left: 54.7%; } .seven { left: 65.64%; } .eight { left: 76.58%; } .nine { left: 87.52%; } .ten { left: 98.4%; } .primary-color { background-color: #ba0032; } .no-color { background-color: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> <div class="carousel-item"> <img src="https://loremflickr.com/320/240" alt=""> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="progress progress-striped active"> <div class="one no-color"></div> <div class="two no-color"></div> <div class="three no-color"></div> <div class="four no-color"></div> <div class="five no-color"></div> <div class="six no-color"></div> <div class="seven no-color"></div> <div class="eight no-color"></div> <div class="nine no-color"></div> <div class="ten no-color"></div> <div class="progress-bar progress-bar-success" style="width:0%"></div> </div> 

如何結合輪播和進度條進行同步，使其無限循環？

Answer 1

要使滑塊與輪播“同步”，每次進度條到達下一個點時，您都​​必須調用$('.carousel').carousel(number)方法。 並循環播放您的輪播，只需在到達末尾時將progressbar.width()重置為零即可。

您可能需要重構代碼，使其可以處理任意數量的幻燈片（使用功能），並嘗試使用百分比值而不是px-這將有助於您保持輪播的響應速度。