Issue with carousel using bootstrap 2

Question

trying to use a carousel on my webpage, but cannot get the code to come in. think it is something to do with calling the javascript from the bootstrap folder, but not sure. please see code below:

in body:

<div id="myCarousel" class="carousel slide">
      <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> 
    <!-- Carousel items -->
      <div class="carousel-inner">

      <div class="active item">
        <div class="row-fluid">
          <div class="span12"><a href="#x"><img src="images/Fiona & Catherine.jpg" alt="Ladies Dancing" style="max-width:100%; max-height: 75%;"></a></div>
        </div><!--/row-fluid-->
      </div><!--/item-->

      <div class="item">
        <div class="row-fluid">
            <div class="span12"><a href="#x"><img src="images/Group 1.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></a></div>
        </div><!--/row-fluid-->
      </div><!--/item-->

      <div class="item">
        <div class="row-fluid">
            <div class="span12"><a href="#x"><img src="images/Group 2.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></a></div>
        </div><!--/row-fluid-->
      </div><!--/item-->

    </div><!--/carousel-inner-->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div><!--/myCarousel-->

before closing body tag to try to call the javascript:  

<script src="js/bootstrap.js">
      $('.carousel').carousel();
    </script>

I am a beginner to web design, so thanks for help!!!

Answer 1

First of all I think you should use Twitter Bootstrap 3, since it's the newest version of Bootstrap.

About your problem, see if you're calling jquery before you call bootstrap.js file.

Answer 2

Two separate script tags, sir :)

<script src="js/bootstrap.js"></script>
<script>
     $(function() {
         $('.carousel').carousel();
     });
</script>