javascript - Bootstrap Carousel Not Automatically Sliding

Question

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.

Here's my JS setup in the header:

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

And the HTML:

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">?</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">?</a>

Also just added this to no avail:

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>

After making the above change, the javascript console says:

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Any thoughts on why this wouldn't be working?

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 1200
    })
  });
</script>

If it still is not working, look for potential errors in the browser's (firebug/chrome..) console.

---

For

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Make sure:

Only one jQuery is included

Only one bootstrap-carousel.js or bootstrap.js is included.

jQuery is included first, then bootstrap-carousel.js or bootstrap.js, then $(document).ready( ...