Created
November 25, 2014 19:29
-
-
Save fanian/9b1cc5b08ac158d1d4cb to your computer and use it in GitHub Desktop.
Normalize Carousel Heights - pass in Bootstrap Carousel items
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
}); | |
}); |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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