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>
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