<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <article class="item active"> <img src="http://placehold.it/1200x440/4466e4/ffffff"> </article> <article class="item"> <img src="http://placehold.it/1200x440/00cc00/cccccc"> </article> <article class="item"> <img src="http://placehold.it/1200x440/dddddd/333333"> </article> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Controls --> <div class="carousel-controls"> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-backward"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-forward"></span> </a> </div> </div> </div>

.carousel-control.left, .carousel-control.right {background-image:none !important;} .carousel-inner .item img {width:100%;height:100%;} .carousel-indicators {bottom:5px;left:10px;width:auto;padding:5px 25px 5px 25px;margin-left:0;background:rgba(0,0,0,0.7);} .carousel-indicators li {border-radius:0;width:8px;height:8px;background:#fff;} .carousel-indicators .active {width:10px;height:10px;background:#39b3d7;border-color:#39b3d7;} .carousel-control {background: transparent;color:#fff;padding: 4px 0;width:26px;top:auto; left:auto;bottom:12px;opacity:0.85;} .carousel-control :hover { padding:4px; background:rgba(0,0,0,0.35);} .carousel-control.right {right:10px;} .carousel-control.left {right: 46px;} .carousel-caption {top:auto;width:auto;right:auto;bottom:60px;left:10px;padding:20px;background:rgba(0,0,0,0.70);text-align:left;height:auto;max-width:50%;}

$('#myCarousel').carousel({ interval: 4000 });