CODEWITHSUNDEEP
htmltwitter-bootstrap
Firdous Amir
Firdous Amir

Reputation: 1303

Bootstrap Carousel Disappears on last item

There are totally 2 item/images in this carousel. After the second image loaded, Carousel tries to move into a third item (there is none) and the carousel just disappears. After the intervel the carousel comes back with the first image.

Carousel slides like..

Item 1 > Item 2 > Disappear > Item 1 > ...

The version are Bootstrap 2.1 and jQuery 1.8.1. Below is the code.

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script>

<div id="homeCarousel" class="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/hawk2.jpg" alt="" >
            </div>
            <div class="item">
                <img src="images/hawk5.jpg" alt="" >
            </div>

            <div class="carousel-caption">
                    <ul class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">
                            <h1>**</h1>
                            <h4>Business Applications</h4>
                    </a></li>
                    <li><a href="#profile" data-toggle="tab"><h1>**</h1>
                            <h4>IT Infrastructure</h4></a></li>
                    <li><a href="#messages" data-toggle="tab"><h1>**</h1>
                            <h4>Web & Content</h4></a></li>
                </ul>

            </div>
            <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
            <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>

        </div>
    </div>

What could be wrong here?

-Update: I tried updating the jQuery to 1.8.3 and Bootstrap to 2.2.2 - No Change

Upvotes: 3

Views: 5399

Answers (2)

nidal
nidal

Reputation: 470

Had the same problem and you have to put the next and previous buttons outside the .carousel-inner div.

Your code has the next and previous buttons inside that div.

Upvotes: 7

GmG
GmG

Reputation: 1372

The carousel-caption should be inside any item class:

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script>

<div id="homeCarousel" class="carousel">
<div class="carousel-inner">
    <div class="item active">
        <img src="images/hawk2.jpg" alt="" >
        <div class="carousel-caption"> <!-- carousel-caption begin -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">
                        <h1>**</h1>
                        <h4>Business Applications</h4>
                </a></li>
                <li><a href="#profile" data-toggle="tab">
                    <h1>**</h1>
                    <h4>IT Infrastructure</h4>
                </a></li>
                <li><a href="#messages" data-toggle="tab">
                    <h1>**</h1>
                    <h4>Web & Content</h4>
                </a></li>
            </ul>
        </div> <!-- carousel-caption end -->
    </div>
    <div class="item">
        <img src="images/hawk5.jpg" alt="" >
        <div class="carousel-caption"> <!-- carousel-caption begin -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">
                        <h1>**</h1>
                        <h4>Business Applications</h4>
                </a></li>
                <li><a href="#profile" data-toggle="tab">
                    <h1>**</h1>
                    <h4>IT Infrastructure</h4>
                </a></li>
                <li><a href="#messages" data-toggle="tab">
                    <h1>**</h1>
                    <h4>Web & Content</h4>
                </a></li>
            </ul>
        </div> <!-- carousel-caption end -->
    </div>
    </div>
    <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
    <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>
</div>

Upvotes: 1

Related Questions