Set Bootstrap carousel item heights

bootstrap-carousel-height-fix.js

/**
 * Set Carousel Item heights
 *
 * The following jQuery sets the height of each `.carousel-item` 
 * to the height of the largest carousel item in the set. This 
 * prevents unusual resizing issues for dynamic text lengths.
 */
(function($) {
	function setCarouselHeight($carousel) {
		var id = $carousel.attr("id");
		var maxCarouselItemHeight = Math.max.apply(null, $carousel.find(".carousel-item").map(function (){
			return $(this).height();
		}).get());
		$carousel.find(".carousel-item").each(function(){
			$(this).css("height", maxCarouselItemHeight);
		});
	}
	var $carousels = $(".carousel");
	$carousels.each(function(){
		setCarouselHeight($(this));
	});
	$(window).resize(function(){
		$carousels.each(function(){
			$(this).find(".carousel-item").each(function(){
				$(this).css("height", "");
			});
			setCarouselHeight($(this));
		});
	});
})(jQuery);

I frequently use Bootstrap Carousels in builds as a content slider, for example for testimonials. By default however the carousel height is not fixed and resizes based on the content. Since content length can differ from slide to slide, this causes page jumping and the last line of text can appear to be clipped momentarily while sliding in.

To fix this, I use this jQuery to calculate the height of the largest slide and apply that height to all other slides essentially creating a fixed height carousel.