URL87 URL87 - 2 months ago 19
CSS Question

Bootstrap.js Carousel with only text

I follow this tutorial to make Carousel slide .

When I define each item contain image and paragraph as -

<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>


it's work fine (here its jsFiddle) .

But when I reduce it to paragraph only as -

<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>


it stop working (here its jsFiddle) .

How could I make it work with only paragraph such that is slide the text each switch ?

Answer

The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:

.carousel-caption{
    position:static;
}

Here's the demo of it working both with and without image:

DEMO