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>

Recommended Answers

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:

Jump to Post

All 2 Replies

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.