Elements: Carousel

<!-- Carousel -->
<div id="carousel-demo-01" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-demo-01" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-demo-01" data-slide-to="1"></li>
        <li data-target="#carousel-demo-01" data-slide-to="2"></li>
    </ol>
    <!-- /Indicators -->

    <!-- Stage -->
    <div class="carousel-inner">

        <!-- Carousel Item -->
        <div class="carousel-item active">
            <img src="../images/mockup-02.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

        <!-- Carousel Item -->
        <div class="carousel-item">
            <img src="../images/mockup-03.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

        <!-- Carousel Item -->
        <div class="carousel-item">
            <img src="../images/mockup-04.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

    </div>
    <!-- /Stage -->

    <!-- Control: Previous -->
    <a class="carousel-control-prev" href="#carousel-demo-01" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <!-- /Control: Previous -->

    <!-- Control: Next -->
    <a class="carousel-control-next" href="#carousel-demo-01" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!-- /Control: Next -->

</div>
<!-- /Carousel -->

<!-- Carousel -->
<div id="carousel-demo-02" class="carousel slide carousel-fade" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-demo-02" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-demo-02" data-slide-to="1"></li>
        <li data-target="#carousel-demo-02" data-slide-to="2"></li>
    </ol>
    <!-- /Indicators -->

    <!-- Stage -->
    <div class="carousel-inner">

        <!-- Carousel Item -->
        <div class="carousel-item active">
            <img src="../images/mockup-02.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

        <!-- Carousel Item -->
        <div class="carousel-item">
            <img src="../images/mockup-03.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

        <!-- Carousel Item -->
        <div class="carousel-item">
            <img src="../images/mockup-04.jpg" class="d-block w-100" alt="" title="">
            <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>
        <!-- /Carousel Item -->

    </div>
    <!-- /Stage -->

    <!-- Control: Previous -->
    <a class="carousel-control-prev" href="#carousel-demo-02" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <!-- /Control: Previous -->

    <!-- Control: Next -->
    <a class="carousel-control-next" href="#carousel-demo-02" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!-- /Control: Next -->

</div>
<!-- /Carousel -->