Twitter bootstrap carousel not looping

[NDoubleD]

I'm using Twitter bootstrap 2.0.4 for a website. I have a carousel with a certain number of pictures, which gets created just fine. It starts cycling, the pausing on hovering works, the next and previous buttons all work. Only thing that's odd is that when it reaches the end of the images it doesn't loop back to the first one, it just disappears all of the sudden. Looked all over, but can't find what I am doing wrong.

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            ...
        </div>
        <div class="item">
            ...
        </div>
        ...
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
</div>





<script>
        $('.carousel').carousel({});
</script>

Only thing that's odd is that when it reaches the end of the images it doesn't loop back to the first one, it just disappears all of the sudden. Looked all over, but can't find what I am doing wrong.

It should look something like this:

http://stackoverflow.com/questions/11441474/stop-twitter-bootstrap-carousel-at-the-end-of-its-slides

and also read this:

http://twitter.github.io/bootstrap/javascript.html#carousel

[travis.holt.921_2]

Carousel nav cannot be inside the <div class="carousel-inner">. Below is the correct code. Should work for you.

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            ...
        </div>
        <div class="item">
            ...
        </div>
        ...
     </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

</div>