Normalize Carousel Heights - pass in Bootstrap Carousel items

bootstrap carousel height

// Normalize Carousel Heights - pass in Bootstrap Carousel items.
	$.fn.carouselHeights = function() {

		var items = $(this), //grab all slides
			heights = [], //create empty array to store height values
			tallest; //create variable to make note of the tallest slide

		var normalizeHeights = function() {

			items.each(function() { //add heights to array
				heights.push($(this).height());
			});
			tallest = Math.max.apply(null, heights); //cache largest value
			items.each(function() {
				$(this).css('min-height',tallest + 'px');
			});
		};

		normalizeHeights();

		$(window).on('resize orientationchange', function () {
			//reset vars
			tallest = 0;
			heights.length = 0;

			items.each(function() {
				$(this).css('min-height','0'); //reset min-height
			});
			normalizeHeights(); //run it again
		});

	};

	jQuery(function($){

		$(window).on('load', function(){
			$('#carousel .item').carouselHeights();
		});

	});

This code makes the opposite:
takes the shortest image and sets that value as the maximum height.
All other slides appear cropped

HOW TO USE: change the carousel id (#carousel-single) and paste after your carousel

            <script> 
            jQuery('.carousel').carousel({interval: 3000 });
            // Normalize Carousel Heights - pass in Bootstrap Carousel items.
            function carouselNormalization() {
            var items = jQuery('#carousel-single .item'), //grab all slides
            heights = [], //create empty array to store height values
            shortest; //create variable to make note of the shortest slide

            if (items.length) {
            function normalizeHeights() {
            items.each(function() { //add heights to array
            heights.push(jQuery(this).height());
            });
            shortest = Math.min.apply(null, heights); //cache largest value
            items.each(function() {
            jQuery('.carousel-inner').css('height',shortest + 'px').css('overflow','hidden');

            });
            };
            normalizeHeights();

            jQuery(window).on('resize orientationchange', function () {
            shortest = 0, heights.length = 0; //reset vars
            items.each(function() {
            jQuery('.carousel-inner').css('height','0'); //reset min-height
            });
            normalizeHeights(); //run it again
            });
            }
            }
            carouselNormalization();
            </script>

For some reason I get weird heights from this. Items 2 through (n-1) have a seemingly arbitrary value. These heights are not the computed heights found when not using this function.

I'm seeing the same issue as robertdavId010, in IE9 and Firefox. It works fine in Chrome tho. It seems that FF doesn't calculate the height of hidden .items very well.