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?