task Text Only Twitter Bootstrap Carousel

I use Twitter Bootstrap for almost everything these days. Its built in components typically cover 90% of any job's needs, at least if you're willing to make some adjustments. For example, it comes with a an easy to implement and manipulate carousel. However, their carousel is only suited for images or images with captions. It doesn't work well with just text--say for example if you wanted to feature a bunch of quotes. With a touch of CSS and a little bit of javascript, you can get passed this shortcoming though.

The Problems

If you try to use just text, you'll run into the following problems

• the carousel completely collapses and doesn't show the text within the caption div at all (fixed via css)
• after fixing the above, your slides won't adjust well for different sized (height) content; the slides will resize when each slide is transitioned in, causing your page height to bounce around in an unsightly manner

The Solution

To fix the first problem, don't wrap your text in the carousel-caption div as suggested by the bootstrap docs. Remove that div altogether. Instead, wrap your text content in a div such as .carousel-content. If you want the text to appear vertically aligned within each slide, apply the following CSS as follows. 

.carousel-content { 
    display: flex;
    align-items: center; 
}

To fix the second problem--the content of varying heights one--we need some js. Here's what I came up with. When the DOM loads, we iterate through all of the carousel slide items and find the tallest one. Then we simply set the slide height to equal that value.

    setCarouselHeight('#carousel-id');

    function setCarouselHeight(id)
    {
        var slideHeight = [];
        $(id+' .item').each(function()
        {
            // add all slide heights to an array
            slideHeight.push($(this).height());
        });

        // find the tallest item
        max = Math.max.apply(null, slideHeight);

        // set the slide's height
        $(id+' .carousel-content').each(function()
        {
            $(this).css('height',max+'px');
        });
    }

Also, I wrap the carousel-inner div within some typical bootstrap scaffolding so that the text content spans a specified number of columns and doesn't overlap with the carousel control elements.

Here's a working fiddle: http://jsfiddle.net/technotarek/gXN2u/. Or see it in the wild on 935lies.com as well, where the same method is used on a page with multiple carousels.