Member Avatar for 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>
  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by travis.holt.921_2
Member Avatar for 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>
Be a part of the DaniWeb community

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