<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="carousel slide article-slide" id="article-photo-carousel"> <!-- Wrapper for slides --> <div class="carousel-inner cont-slider"> <div class="item active"> <img alt="" title="" src="http://ioneone.com/tabebuia/images_room/u-1.jpg"> </div> <div class="item"> <img alt="" title="" src="http://ioneone.com/tabebuia/images_room/a-1.jpg"> </div> <div class="item"> <img alt="" title="" src="http://ioneone.com/tabebuia/images_room/f-1.jpg"> </div> <div class="item"> <img alt="" title="" src="http://ioneone.com/tabebuia/images_room/s-1.jpg"> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#article-photo-carousel"> <img alt="" src="http://ioneone.com/tabebuia/images_room/u-1.jpg"> </li> <li class="" data-slide-to="1" data-target="#article-photo-carousel"> <img alt="" src="http://ioneone.com/tabebuia/images_room/a-1.jpg"> </li> <li class="" data-slide-to="2" data-target="#article-photo-carousel"> <img alt="" src="http://ioneone.com/tabebuia/images_room/f-1.jpg"> </li> <li class="" data-slide-to="3" data-target="#article-photo-carousel"> <img alt="" src="http://ioneone.com/tabebuia/images_room/s-1.jpg"> </li> </ol> </div>

/* Main carousel style */ .carousel { width: 600px; } /* Indicators list style */ .article-slide .carousel-indicators { bottom: 0; left: 0; margin-left: 5px; width: 100%; } /* Indicators list style */ .article-slide .carousel-indicators li { border: medium none; border-radius: 0; float: left; height: 54px; margin-bottom: 5px; margin-left: 0; margin-right: 5px !important; margin-top: 0; width: 100px; } /* Indicators images style */ .article-slide .carousel-indicators img { border: 2px solid #FFFFFF; float: left; height: 54px; left: 0; width: 100px; } /* Indicators active image style */ .article-slide .carousel-indicators .active img { border: 2px solid #428BCA; opacity: 0.7; }

// Stop carousel $('.carousel').carousel({ interval: false });