<!-- Carousel wrapper -->

<div id="carouselDarkVariant" class="carousel slide carousel-fade carousel-dark" data-mdb-ride="carousel">

  <!-- Indicators -->

  <div class="carousel-indicators">

    <button

      data-mdb-target="#carouselDarkVariant"

      data-mdb-slide-to="0"

      class="active"

      aria-current="true"

      aria-label="Slide 1"

    ></button>

    <button

      data-mdb-target="#carouselDarkVariant"

      data-mdb-slide-to="1"

      aria-label="Slide 1"

    ></button>

    <button

      data-mdb-target="#carouselDarkVariant"

      data-mdb-slide-to="2"

      aria-label="Slide 1"

    ></button>

  </div>

​

  <!-- Inner -->

  <div class="carousel-inner">

    <!-- Single item -->

    <div class="carousel-item active">

      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(19).webp" class="d-block w-100" alt="Motorbike Smoke"/>

      <div class="carousel-caption d-none d-md-block">

        <h5>First slide label</h5>

        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>

      </div>

    </div>

​

    <!-- Single item -->

    <div class="carousel-item">

      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(35).webp" class="d-block w-100" alt="Mountaintop"/>

      <div class="carousel-caption d-none d-md-block">

        <h5>Second slide label</h5>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      </div>

    </div>

​

    <!-- Single item -->

    <div class="carousel-item">

      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(40).webp" class="d-block w-100" alt="Woman Reading a Book"/>

      <div class="carousel-caption d-none d-md-block">

        <h5>Third slide label</h5>

        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

      </div>

    </div>

  </div>

  <!-- Inner -->

​

  <!-- Controls -->

  <button class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant" data-mdb-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Previous</span>

  </button>

  <button class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant" data-mdb-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Next</span>

  </button>

</div>

<!-- Carousel wrapper -->

.carousel-indicators {

    bottom: -50px;

}

​