Carousels

<div id="my-carousel" class="carousel slide img-thumbnail push-down-1" data-ride="carousel" data-interval="3000">
   <!-- Indicators -->
   <ol class="carousel-indicators">
      <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#my-carousel" data-slide-to="1"></li>
      <li data-target="#my-carousel" data-slide-to="2"></li>
   </ol>

   <!-- Wrapper for slides -->
   <div class="carousel-inner">

      <div class="item active">
         <img src="http://unsplash.it/800/400" alt="">
         <div class="carousel-caption">
            <h3>Heading Slide #1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </div>

      </div>

      <div class="item">
         <img src="http://unsplash.it/800/400" alt="">
         <div class="carousel-caption">
            <h3>Heading Slide #2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </div>
      </div>

      <div class="item">
         <img src="http://unsplash.it/800/400" alt="">
         <div class="carousel-caption">
            <h3>Heading Slide #3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </div>
      </div>

   </div>

   <!-- Left and right controls -->
   <a class="left carousel-control" href="#my-carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#my-carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
   </a>
</div>

/* Set the color of the captions explicitly */
.carousel p,
.carousel h3 {
   color: white !important;
}

/* Space the circular slide indicators out a wee bit */
.carousel-indicators li,
carousel-indicators li.active {
   margin-left: 5px;
}