BS-Carusel-Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .carusel-ctrl {
          /*position: absolute;
          top: 50%;          */
          color:aqua;
      }
    </style>
</head>

<body>

    <div class="jumbotron">
        <div class="container">
            <div id="carousel-bs" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-bs" data-slide-to="0"></li>
                    <li data-target="#carousel-bs" data-slide-to="1" class="active"></li>
                    <li data-target="#carousel-bs" data-slide-to="2"></li>
                    <li data-target="#carousel-bs" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <!-- slides -->
                    <div class="item">
                        <img alt="First slide" src="http://lorempixel.com/1200/600/sports/1" />
                        <div class="carousel-caption">
                            <h1>Caption Heading One</h1>
                        </div>
                    </div>
                    <div class="item active">
                        <img alt="Second slide" src="http://lorempixel.com/1200/600/sports/2" />
                    </div>
                    <div class="item">
                        <img alt="Third slide" src="http://lorempixel.com/1200/600/sports/3" />
                    </div>
                    <div class="item">
                        <img alt="Forth slide" src="http://lorempixel.com/1200/600/nature" />
                        <div class="carousel-caption">
                            <h1>Black Friday! Big discount for our flowers!</h1>
                        </div>
                    </div>
                </div>
                <!-- inner -->
                <a class="left carousel-control" href="#carousel-bs" data-slide="prev">
                    <span class="carusel-ctrl glyphicon glyphicon-chevron-left"></span></a>
                <a class="right carousel-control" href="#carousel-bs" data-slide="next">
                    <span class="carusel-ctrl glyphicon glyphicon-forward"></span></a>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                Duis aute anim esse fugiat elit laborum duis laborum est. Elit proident commodo amet anim adipisicing excepteur ipsum nostrud
                ipsum amet et eiusmod incididunt minim. Fugiat irure ut sit enim labore ut est aute amet sunt tempor aute.
                Ullamco amet in ad quis non. Est pariatur quis consectetur amet sit quis esse elit.
            </div>

        </div>
    </div>
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

</html>