title: Bootstrap Carousel Not Automatically Sliding
body: <p>I'm using bootstrap by Twitter's carousel (latest version) and I've got it working - except that it doesn't begin to automatically slide. It works well after you've clicked one of the navigation buttons . Not sure why it's doing this.</p>
  
  <p>Here's my JS setup in the header:</p>
  
  <pre><code>    &lt;script type="text/javascript" src="&lt;?php echo tz_JS . '/bootstrap/jquery.js'; ?&gt;"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="&lt;?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;div class="carousel-inner"&gt;
  
      &lt;div class="active item"&gt;
      &lt;div class="image-position-right"&gt;
          &lt;a href="#"&gt;&lt;img src="validimagelink.jpg" width="920" height="550" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="item"&gt;
      &lt;div class="image-position-right"&gt;
          &lt;a href="#"&gt;&lt;img src="validimagelink.jpg" width="920" height="550" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Also just added this to no avail:</p>
  
  <pre><code>&lt;script&gt;
  $('#myCarousel').carousel({
      interval: 1200
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>After making the above change, the javascript console says:</p>
  
  <p>Uncaught TypeError: Object # has no method 'carousel' 
  (anonymous function) 
  b.extend.ready jquery.min.js:29
  u</p>
  
  <p>Any thoughts on why this wouldn't be working?</p>