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

    <ol class="carousel-indicators">

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

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

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

    </ol>

    <!-- Carousel items -->

    <div class="carousel-inner">

        <div class="active item"></div>

        <div class="item"></div>

        <div class="item"></div>

    </div>

    <!-- Carousel nav -->

    <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>

    <a class="carousel-control right" href="#carousel" data-slide="next">›</a>

</div>

.carousel-fade {

    .carousel-inner {

        .item {

            transition-property: opacity;

        }

        .item,

        .active.left,

        .active.right {

            opacity: 0;

        }

        .active,

        .next.left,

        .prev.right {

            opacity: 1;

        }

        .next,

        .prev,

        .active.left,

        .active.right {

            left: 0;

            transform: translate3d(0, 0, 0);

        }

    }

    .carousel-control {

        z-index: 2;

    }

}

html,

body,

.carousel,

.carousel-inner,

.carousel-inner .item {

    height: 100%;

}

.item:nth-child(1) {

    background: #74C390;

}

.item:nth-child(2) {

    background: #51BCE8;

}

.item:nth-child(3) {

    background: #E46653;

}

$('.carousel').carousel();