CODEWITHSUNDEEP
twitter-bootstrapcarousel
Navin Nagpal
Navin Nagpal

Reputation: 650

Bootstrap 3 carousel wont work

I have used the following code and this is the strange output I get. As can be seen no text is visible and the navigators are stacked vertically

<div class="carousel slide" id="testimonials" data-ride="carousel">
                            <ol="carousel-indicators">
                                <li data-target="#testimonials" data-slide-to="0" class="active"></li>
                                <li data-target="#testimonials" data-slide-to="1"></li>
                                <li data-target="#testimonials" data-slide-to="2"></li>
                                <li data-target="#testimonials" data-slide-to="3"></li>
                                <li data-target="#testimonials" data-slide-to="4"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <h3>Testimonial</h3>
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#testimonials" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#testimonials" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>

Could someone please help me through this...

Upvotes: 0

Views: 667

Answers (1)

Serlite
Serlite

Reputation: 12258

Your HTML is a bit malformed (you noted this in a comment as I was typing my answer, haha...). Where you have:

<ol="carousel-indicators">

It should actually be:

<ol class="carousel-indicators">

Also, by default, I believe you need to have something (with a defined size) besides only the caption in each carousel item - it could be an image, or some other element. The Bootstrap carousel seems to rely on the content's size to resize the carousel appropriately, meaning if you have no content, then nothing will show up as the height will become 0. So, something like this for each item:

<div class="item">
    <!-- Something goes here. Could be an img, div, etc. -->
    <div class="carousel-caption">
        <h3>Testimonial</h3>
    </div>
</div>

Here's an updated example on Bootply. Note how the last carousel element has no content in it (giving it a height of 0), resulting in the caption being hidden and also misplacing the arrows.

Hope this helps! Let me know if you have any questions.

EDIT: Alternatively, if you don't actually have any content you want to put in, you can instead specify a min-height on the carousel items. So, something like this would work:

.carousel-inner .item{
    min-height:400px;
}

Here's a Bootply example using the additional styling instead.

Upvotes: 1

Related Questions