带有进度栏的进度条作为轮播指标

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-这将有助于您保持轮播的响应速度。