LouisWhit
8/25/2018 - 2:06 AM

Bootstrap Carousel with Normalized height

In working on a Bootstrap-based client project, they needed the heights of all the items to be the same height, even though the content was of different heights.

Bootstrap uses position:absolute to move the items. As such, techniques like flex and grid aren’t of much help here.

carousel-height-normalize.js
content_copyfile_download
function normalizeSlideHeights() {
    $('.carousel').each(function(){
      var items = $('.carousel-item', this);
      // reset the height
      items.css('min-height', 0);
      // set the height
      var maxHeight = Math.max.apply(null, 
          items.map(function(){
              return $(this).outerHeight()}).get() );
      items.css('min-height', maxHeight + 'px');
    })
}

$(window).on(
    'load resize orientationchange', 
    normalizeSlideHeights);