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-这将帮助您保持旋转木马的响应速度。

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

1 个答案: