Репликация Bootstrap Карусель - PullRequest
Новая
       8

Репликация Bootstrap Карусель

0 голосов
/ 11 февраля 2019

Я пытаюсь воспроизвести карусель с помощью Bootstrap 4, как показано здесь: https://i.imgur.com/GigpudZ.jpg

По большей части, я довольно далеко продвинулся в репликации, но она абсолютно быстро разваливается.Я не уверен, что делаю это совершенно неправильно или, по крайней мере, иду в правильном направлении.Любая помощь будет принята с благодарностью.

Живой пример можно увидеть на этой странице: http://ds -staging.createabundance.com / extract / 

.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>
...