Progress bar with steps as carousel indicators

Question

I am trying to create a progress bar with steps with my Boostrap 4 carousel. Here is an image of what I am trying to achieve. A Bootstrap carousel and a progress bar under as the image shows. I have managed to create a progress bar that isn't synced, but it is in the direction of my solution. Here is my try: 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> 

How do I combine the carousel and the progress bar to be synced and it that it loops infinite?

Answer 1

To "sync" carousel with slider you'll have to call $('.carousel').carousel(number) method each time progress bar reaches next dot. And to loop your carousel, just reset progressbar.width() to zero when it reaches the end.

You might want to refactor your code so it could handle any number of slides (use functions), and try using percentage values instead of px - that will help you keep your carousel responsive.