<!-- Section: Block Content -->

<section>

​

  <!-- Carousel Wrapper -->

  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>

      <li data-target="#carousel-example-2" data-slide-to="1"></li>

      <li data-target="#carousel-example-2" data-slide-to="2"></li>

    </ol>

    <!-- Indicators -->

    <!-- Slides -->

    <div class="carousel-inner" role="listbox">

      <div class="carousel-item active">

        <div class="view">

          <a href="#!">

            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/ecommerce4.jpg" alt="First slide">

            <div class="mask rgba-white-slight text-center d-flex align-items-center justify-content-center">

              <div class="row">

                <div class="col-12">

                  <p class="h1-responsive red-text font-weight-bold mb-0">Sale off 30% on every saturday!</p>

                </div>

              </div>

            </div>

          </a>

        </div>

      </div>

      <div class="carousel-item">

        <!-- Mask color -->

        <div class="view">

          <a>

            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/ecommerce2.jpg" alt="Second slide">

            <div class="mask rgba-white-slight text-center d-flex align-items-center justify-content-center">

              <div class="row">

                <div class="col-12">

                  <p class="h1-responsive indigo-text font-weight-bold mb-0">Promotion on each smartphone!</p>

                </div>

              </div>

            </div>

          </a>

        </div>

      </div>

      <div class="carousel-item">

        <!-- Mask color -->

        <div class="view">

          <a>

            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/ecommerce3.jpg" alt="Third slide">

            <div class="mask rgba-white-slight text-center d-flex align-items-center justify-content-center">

              <div class="row">

                <div class="col-12">

                  <p class="h1-responsive orange-text font-weight-bold mb-0">Sale off 20% on every headphones!</p>

                </div>

              </div>

            </div>

          </a>

        </div>

      </div>

    </div>

    <!-- Slides -->

    <!-- Controls -->

    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">

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

      <span class="sr-only">Previous</span>

    </a>

    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">

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

      <span class="sr-only">Next</span>

    </a>

    <!-- Controls -->

  </div>

  <!-- Carousel Wrapper -->

​

</section>

<!-- Section: Block Content -->

​

​