task Text Only Twitter Bootstrap Carousel
2014-06-11
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.
Annoying Caveat
If you're using a web-based font service such as MyFonts.com, you're going to run into additional problems. Because of the way those types of services apply font styling, the height measurements used in the js don't work consistently. I played around with a variety of potential fixes for this problem to no avail. I ultimately abandoned hope and chose a different font-face for content in those slides. I believe the way to fix this would be to execute the setCarouselHeight function after the font service has applied the styling. At least with MyFonts.com, I'm not aware of any way to know when that's happened--that is, there's no completion callback.