Bootstrap Slider over Modal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container text-center">
  <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">



          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
              <div class="carousel-caption">
                One Image
              </div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
              <div class="carousel-caption">
                Another Image
              </div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
              <div class="carousel-caption">
                Another Image
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

.btn-default {
  top: 25%;
  left: 25%;
  color: #999;
  background: #fffccc;
}

JavaScript

//js choose jQuery and set onDomready
//original source: http://bootsnipp.com/snippets/featured/carousel-inside-modal