Bootstrap.js Carousel with only text

Question

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 1

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

Answer 2

The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.