<!--Carousel Wrapper-->

    <div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">

        <!--Indicators-->

        <ol class="carousel-indicators">

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

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

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

        </ol>

        <!--/.Indicators-->

​

        <!--Slides-->

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

​

            <!--First slide-->

            <div class="carousel-item active">

                <!--Mask-->

                <div class="view hm-black-light">

                </div>

                <!--/.Mask-->

            </div>

            <!--/.First slide-->

​

            <!--Second slide -->

            <div class="carousel-item">

                <!--Mask-->

                <div class="view hm-black-light">

                </div>

                <!--/.Mask-->

            </div>

            <!--/.Second slide -->

​

            <!--Third slide-->

            <div class="carousel-item">

                <!--Mask-->

                <div class="view hm-black-light">

                </div>

                <!--/.Mask-->

            </div>

            <!--/.Third slide-->

        </div>

        <!--/.Slides-->

​

        <!--Controls-->

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

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

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

        </a>

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

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

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

        </a>

        <!--/.Controls-->

    </div>

    <!--/.Carousel Wrapper-->

    <!--/.Main layout-->

​

​

      /* TEMPLATE STYLES */

        /* Necessary for full page carousel*/

        html,

        body,

        .view {

            height: 100%;

        }

        /* Navigation*/

        .navbar {

            background-color: transparent;

        }

        .scrolling-navbar {

            -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;

            -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;

            transition: background .5s ease-in-out, padding .5s ease-in-out;

        }

        .top-nav-collapse {

            background-color: #1C2331;

        }

        footer.page-footer {

            background-color: #1C2331;

            margin-top: 0;

        }

        @media only screen and (max-width: 768px) {

            .navbar {

                background-color: #1C2331;

            }

        }

        /* Carousel*/

        .carousel,

        .carousel-item,

        .active {

            height: 100%;

        }

        .carousel-inner {

            height: 100%;

        }

        .carousel-item:nth-child(1) {

            background-image: url("http://mdbootstrap.com/images/regular/nature/img%20(54).jpg");

            background-repeat: no-repeat;

            background-size: cover;

        }

        .carousel-item:nth-child(2) {

            background-image: url("http://mdbootstrap.com/images/regular/nature/img%20(41).jpg");

            background-repeat: no-repeat;

            background-size: cover;

        }

        .carousel-item:nth-child(3) {

            background-image: url("http://mdbootstrap.com/images/regular/nature/img%20(35).jpg");

            background-repeat: no-repeat;

            background-size: cover;

        }

        /*Caption*/

        .flex-center {

            color: #fff;

        }

        @media (min-width: 776px) {

            .carousel .view ul li {

                display: inline;

            }

            .carousel .view .full-bg-img ul li .flex-item {

                margin-bottom: 1.5rem;

            }

        }

       $(document).ready(function () {

            $('#carousel-example-1').hammer().on('swipeleft', function () {

                $(this).carousel('next');

            })

            $('#carousel-example-1').hammer().on('swiperight', function () {

                $(this).carousel('prev');

            })

        });