如何找到旋转木马的各个幻灯片的高度答案

【问题标题】：How to find the height of the individual slides of a carousel如何找到旋转木马的各个幻灯片的高度
【发布时间】：2021-05-28 16:04:31
【问题描述】：

我有一个轮播，其中有三张幻灯片，标记如下所示

<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 在屏幕上尚不可用。设置幻灯片高度的方法或最佳方法应该是什么。

【问题讨论】：

尝试设置 max-height 为您喜欢使用 css 分配幻灯片的一些默认值。

标签： javascript html jquery css

【解决方案1】：

也许有点花招 - 像这样？

$(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
}

【讨论】：