Bootstrap carousel controls are not working - twitter-bootstrap-3

Question

i have downloaded a bootstrap carousel template and everything works fine aside from the controls of the carousel. I can see the controls but nothing happens when i click on the left or right control. Any help would be much appreciated. Here are (what i think are) the relevant lines of code:
thanks for your help !
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
here are the script references:
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

Answer 1

I think you misunderstood the documentation. There should be only ONE <div class="carousel-inner">. This is the wrapper for your "items". Change your html between the indicators and the controls like this and you should have more success:
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
Also, if you want the carousel to automatically begin cycling on load, you can add: data-ride="carousel"To the outermost div (the one with your id)
EDIT: One other thing I forgot to mention...
If you don't add some content to the item div, you won't see anything, not even your captions. That's because the captions are set to the bottom of the item div. If you just want to test things out without the content, just add the following css to cause the item div to have some height (I also added a background color so the white text will show up better against the white background):
div.item {
height: 500px;
background-color: green;
}