Блог

У меня есть карусель, в которой есть три слайда, разметка примерно такая ниже

 <div id="corpsite-carousel">
<div class="slide">
<!-- slide 1 content  -->
</div>
<div class="slide">
<!-- slide 2 content -->
</div>
<div class="slide">
<!-- slide 3 content  -->
</div>
<div class="controls">
</div>
</div>
 

Итак, есть три слайда, и каждый из них имеет различную длину содержимого(включая текст и изображения), после реализации я вижу, что каждый слайд имеет свою собственную высоту, основанную на содержимом внутри него, что делает его очень плохим для пользователя (так как при изменении слайдов элементы управления скользящими маркерами меняются вверх и вниз). Я пытаюсь установить высоту слайдов на тот слайд, высота которого самая высокая.

Я пытаюсь использовать следующий код jquery, чтобы найти высоту каждого слайда

 $(document).ready(function(){
 var slides = $('#corpsite-carousel .cmp-carousel__item');
 var heightsArr
 console.log(slides);
 slides.each(funiction(i){
   var height = $(this).innerHeight();
   console.log(height)
 })
})

 

но консоль показывает мне высоту первого слайда, которая является правильной, но остальные 2 высоты слайдов неверны(я проверил dom после скольжения и проверил высоту каждого слайда). Я думаю, это потому, что слайды 2 и 3 еще недоступны на экране. каким должен быть подход или лучший метод для установки высоты слайдов.

Может быть, немного ловкости рук — что-то вроде этого?

 $(document).ready(function(){
 maxHeight = 0 ;
 var slides = $('#corpsite-carousel .cmp-carousel__item');
 var heightsArr
 console.log(slides);
 slides.each(function(i){
   maxHeight = Math.max( maxHeight, quickMeasure($(this)));
 })
})

function quickMeasure(el) {
  var previousCss  = el.attr("style");

  el.css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
  });

  theHeight = $(el).height();

  el.attr("style", previousCss ? previousCss : "");
  return theHeight
}