Выравнивание по высоте блоков в каруселе

07 Март 2017

Верстать на bootstrap удобно, удобно когда необходимо сделать версию адаптивную версию сайта. Большинство стилей уже прописано и работает так как надо. Так-же в bootstrap есть различные компоненты, например карусель. Не надо прикручивать сторонние скрипты. Хотя конечно если потребуется от карусели немного больший функционал, то лучше прикрутить что-нибудь помощнее. Например я не увидел в коде карусели как динамически добавлять/удалять элементы. Возможно плохо смотрел. И столкнулся я еще с одной неприятной ситуацией. А именно выравнивания блоков по высоте в каруселе. Пришлось написать костыль.

$(function() {
   //normalize carousel heights
   var maxheightsCarousel = 0;
   $('#mycarousel).on('slide.bs.carousel', function (e) {
      let hDiv = $(this).find('.item.active').children('.mycarousel-caption');
      let h = hDiv.outerHeight();
      if(h>maxheightsCarousel){
           maxheightsCarousel = h;
           $(this).find('.item').children('.mycarousel-caption').each(function(){
               $(this).css('min-height', maxheightsCarousel);
           });
       }
   });

    $('#mycarousel').on('slid.bs.carousel', function () {
       let hDiv = $(this).find('.item.active').children('.mycarousel-caption');
       let h = hDiv.outerHeight();
       if(h>maxheightsCarousel){
            maxheightsCarousel = h;
           $(this).find('.item').children('.mycarousel-caption').each(function(){
               $(this).css('min-height', maxheightsCarousel);
           });
       }
   });

   $( window ).resize(function() {
       maxheightsCarousel = 0;
       $('#mycarousel').find('.item').children('.mycarousel-caption').each(function(){
           $(this).css('min-height', maxheightsCarousel);
       });
   });
});

Код который я накидал решает проблему выравнивания блоков по высоте в карусели ели картинки имеют одинаковые размеры, а текст отличается. При этом текст расположен под картинкой. Но чувствую что это не правильное решение. Правильней было-бы решить с помощью css свойства display: flex; Но в данной каруселе внутренние элементы имеют стиль css display:none; Поэтому у них в самом начале нет высоты и не происходит выравнивания по высоте всех блоков.
В bootstrap caruosel можно разместить <div class="caruosel-caption">, но будет размещен на самом элементе карусели(картинки). Да и проблема выравнивания текста по высоте относительно других блоков не куда не уйдет.
Поэтому пока буду использовать этот костыль.
Андрей Лебедев

,

, , , , ,

Комментарий

Нет комментарий.

Комментировать: