<div class="container">

<div class="row">

<div class="col-lg-12">
  <div id="carousel-custom" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1400x600&text=slide1" alt="..." class="img-responsive">
    </div>
    <div class="item">
      <img src="http://placehold.it/1400x600&text=slide2" alt="..." class="img-responsive">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-custom" role="button" data-slide="prev">
    <i class="fa fa-chevron-left"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-custom" role="button" data-slide="next">
    <i class="fa fa-chevron-right"></i>
    <span class="sr-only">Next</span>
  </a>
  
  
  <!-- Indicators -->
  <ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block">
            <li data-target="#carousel-custom" data-slide-to="0" class="active">
              <img src="http://placehold.it/100x50&text=slide1" alt="..." class="img-responsive">
            </li>
            <li data-target="#carousel-custom" data-slide-to="1">
              <img src="http://placehold.it/100x50&text=slide2" alt="..." class="img-responsive">
            </li>

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

#carousel-custom {
    margin-top:  10px;
    width: 100%;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}
.carousel-control.left {
    background-image: none;
    width: 54px;
    height: 54px;
    top: 50%;
    left: 20px;
    margin-top: -27px;
    line-height: 54px;
    border: 2px solid #fff;
    opacity: 1;
    text-shadow: none;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.carousel-control.right {
    background-image: none;
    width: 54px;
    height: 54px;
    top: 50%;
    right: 20px;
    margin-top: -27px;
    line-height: 54px;
    border: 2px solid #fff;
    opacity: 1;
    text-shadow: none;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}