Bootstrap Carousel with outside indicators


<div class="container">
    <div class="row">
      <div class="span12 carousel-container">
          <div id="carousel" class="carousel slide carousel-fade">

            <!-- Carousel items -->
            <div class="carousel-inner">
              <div data-slide-no="0" class="item carousel-item active">
                <img src="http://lorempixel.com/1920/1080/animals" alt="">
                <div class="carousel-caption">
                  <h4>We Help You Estimate!</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div data-slide-no="1" class="item carousel-item">
                <img src="http://lorempixel.com/1920/1080/food" alt="">
                <div class="carousel-caption">
                  <h4>second thumbnail</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div data-slide-no="2" class="item carousel-item">
                <img src="http://lorempixel.com/1920/1080/cats" alt="">
                <div class="carousel-caption">
                  <h4>Third Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
            <a class="carousel-control right" href="#carousel" data-slide="next">›</a>
          </div>
          <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="myCarousel-target active"></li>
            <li data-target="#carousel" data-slide-to="1" class="myCarousel-target"></li>
            <li data-target="#carousel" data-slide-to="2" class="myCarousel-target"></li>
          </ol>

      </div>
    </div>
</div>


    .carousel>.carousel-inner>.item>.circleElement {
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 11%;
    left: 39%;
    width: 400px;
    height: 400px;
    opacity: .5;
}
.carousel-indicators {
    top: 35px;
    background: #404549;
    padding: 30px;
    border-radius: 10px;
}
.carousel-indicators li { cursor: pointer }
.carousel-control {
    width: 60px;
    height: 0;
    margin-top: -20px;
    font-size: 100px;
    background: none;
    border: none;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}
.carousel-indicators li {
    background-color: #999;
    background-color: rgba(255,255,255,0.3);
}
.carousel-caption {
    padding: 35px;
    text-align: center;
}
.carousel-caption h4 {
    font-family: "lato";
    font-weight: 100;
    font-size: 61px;
}
.carousel-caption p {
    font-family: "lato";
    margin-top: 39px;
    font-size: 22px;
    margin-bottom: -8px;
    font-weight: 300;
    line-height: 30px;
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active { opacity: 1 }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1 }
.carousel-fade .carousel-control { z-index: 2 }
@media only screen and (max-width:767px) { 
    h1 { font-size: 30px !important }
    .carousel-caption {
        padding: 15px;
        text-align: center;
    }
    .carousel-caption h4 { font-size: 30px }
    .carousel-caption p {
        margin-top: 10px;
        font-size: 10px;
        margin-bottom: -10px;
    }
    body { padding: 0 !important }
    .carousel { margin-bottom: 0 }
    .hero-unit { padding-bottom: 60px }
    .hero-unit p { font-size: 16px }
}
.carousel-container {
    width: 80% !important;
    padding-left: 10%;
    margin-top: 35px;
}
    

	// Generated by CoffeeScript 1.7.1
$(document).ready(function() {
  $(".carousel").carousel({
    interval: 2000
  });
  $(".carousel").on("slid", function() {
    var to_slide;
    to_slide = $(".carousel-item.active").attr("data-slide-no");
    $(".myCarousel-target.active").removeClass("active");
    $(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active");
  });
  $(".myCarousel-target").on("click", function() {
    $(this).preventDefault();
    $(".carousel").carousel(parseInt($(this).attr("data-slide-to")));
    $(".myCarousel-target.active").removeClass("active");
    $(this).addClass("active");
  });
});