Basic Bootstrap Carousel

Basic Bootstrap Carousel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" title="New Location: 12/03/2014" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" title="New Location: 12/03/2014" ></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h2 class="featurette-heading subHeadingText">New Location</h2>
      <img class="img-responsive center-block" src="http://placehold.it/450x350"
        style="width: 70%; height: 70%; margin-bottom: 20px" title="Reading School, new location">
    </div>
    <div class="item">
      <h2 class="featurette-heading subHeadingText">New Location</h2>
      <img class="img-responsive center-block" src="http://placehold.it/450x350"
        style="width: 70%; height: 70%; margin-bottom: 20px" title="Reading School, new location">
    </div>
     
  </div>

</div>

CSS

/* for testing only */
.item img {width: 100%; height: auto}

.carousel-indicators{
    top: 0;
}
.carousel-indicators li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #395653;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);
}
.carousel-indicators .active {
    width: 22px;
    height: 22px;
    margin: 10px;
    background-color: #65bfcc;
}

.carousel-inner {
    margin-bottom:0;
}

.carousel-caption {
    bottom: -7%;
}

.carousel-control.left, .carousel-control.right {
    background-image: none
}

.carousel-inner .item > img {
    top: 0;
    left: 0;
    min-width: 10%;
    height: 350px;
}

/* Images Home page */
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}