Twitter Bootstrap 3 Carousel not automatically starting

Twitter_Bootstrap_Carousel

Twitter Bootstrap Carousel

You may face problem on Twitter Bootstrap 3 Carousel not automatically starting, it’ll not work properly when the JavaScript file will not placed properly.
You have a carousel on my site that was created with Twitter Bootstrap. And It does not initiate until I click on the navigation to advance to the next slide.

Here is the code :

<!-- Carousel     ================================================== --></pre>
<div class="carousel slide" id="myCarousel">
<!-- Indicators -->
<div class="carousel-inner">
<div class="item">
<img alt="First slide" src="img/hero-cummins.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
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.

<a class="btn btn-large btn-success" href="#">Sign up today</a></div>
</div>
</div>
<div class="item  active">
<img alt="Second slide" src="img/hero-tampa-bay-times.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
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.

<a class="btn btn-large btn-success" href="#">Learn more</a></div>
</div>
</div>
<div class="item">
<img alt="Third slide" src="img/hero-cummins2.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
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.

<a class="btn btn-large btn-success" href="#">Browse gallery</a></div>
</div>
</div>
</div>
</div>
<pre><!-- /.carousel -->

here comes the solution :

You need to put the JavaScript at the end of the page, the calling of the function must be put after them:

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script>

<script type="text/javascript">// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function()  { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
// ]]></script>