<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="row"> <div class="col-md-12"> <div class="carousel slide" id="Carousel"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#Carousel"> </li> <li data-slide-to="1" data-target="#Carousel"> </li> <li data-slide-to="2" data-target="#Carousel"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/7.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/6.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="http://libguides.aurora.edu/LibraryInfo/Room204"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/12.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/3.png" style="max-width:100%;" /></a></div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/1.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/9.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/11.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/8.png" style="max-width:100%;" /></a></div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/10.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/5.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/2.png" style="max-width:100%;" /></a></div> <div class="col-md-3"><a class="thumbnail" href="#"><img alt="Image" src="https://libapps.s3.amazonaws.com/customers/468/images/4.png" style="max-width:100%;" /></a></div> </div> </div> </div> <a class="left carousel-control" data-slide="prev" href="#Carousel">‹</a> <a class="right carousel-control" data-slide="next" href="#Carousel">›</a></div> </div> </div>

<style> .carousel { margin-bottom: 0; padding: 0 30px 30px 30px; } /* The controlsy */ .carousel-control { left: -12px; height: 40px; width: 40px; background: none repeat scroll 0 0 #222222; border: 4px solid #FFFFFF; border-radius: 23px 23px 23px 23px; margin-top: 110px; } .carousel-control.right { right: -12px; } /* The indicators */ .carousel-indicators { right: 50%; top: auto; bottom: -10px; margin-right: -19px; } /* The colour of the indicators */ .carousel-indicators li { background: #cecece; } .carousel-indicators .active { background: #428bca; }