复制Bootstrap传送带

Question

我正在尝试使用Bootstrap 4复制轮播，如此处所示：https://i.imgur.com/GigpudZ.jpg

在大多数情况下，我在复制它方面已经走了很长一段距离，但是它绝对会在响应时崩溃。我不确定自己是在做错什么，还是至少在朝着正确的方向前进。任何帮助将不胜感激。

可以在以下页面上查看在线示例：http://ds-staging.createabundance.com/extraction/

.carousel-item {
  height: 860px;
}

.carousel-indicators li {
  text-align: center;
  text-indent: 0;
  width: 200px;
  height: 80px;
  border: none;
  font-family: 'Fira Sans';
  font-weight: 600;
}

.carousel-indicators {
  bottom: 70px;
}

.carousel-inner {
  overflow: visible;
}

.carousel-caption {
  color: black;
  text-align: center;
  bottom: -60px;
}

```

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">STEP 1</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1">STEP 2</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2">STEP 3</li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/wp-content/uploads/2019/01/ease-operation-step1.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <p>Operator packs a mesh bag with biomass, places the bag in the vessel and locks the lid.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/wp-content/uploads/2019/01/ease-operation-step2.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <p>The unit is filled with alcohol from the source tank initiating an agitated wash and spin cycle, extracting 98% of the desired plant material and removing any remaining alcohol mixture.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/wp-content/uploads/2019/01/ease-operation-step3.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <p>The system then drains and the alcohol tincture is ready for further processing.</p>
      </div>
    </div>
  </div>
</div>