Javascript 旋转木马整页滑块-滑块高度问题

我正在尝试制作一个网站，可以通过下面的滑块展示产品：

我已更改滑块，使其适合全屏显示。也成功地停止了自动播放。 但是，现在我正试图确定如何让滑块根据其中的内容增加高度

从我收集的数据来看，滑块的高度设置为100%，但如果我让它采用自己的高度。。它摆脱了旋转木马。。 因此，我不知道如何让它占据内容的长度，并继续成为一个旋转木马

#slider .slide {
position: relative;
display: none;
/* height: 100% !important; */}

上图：如果我去掉100%的高度，它会占据内容的高度，但所有其他幻灯片都会消失

我认为它不可能有动态高度，但仍然可以作为滑块工作。 但即使它达到了最高的跳水台的高度，也会很好

恐怕只有Javascript能做到这一点。我没有足够的知识来定制适合我需要的代码

我试着在代码上进行计算，但什么都做不到

有人能帮我吗

PS：也要意识到，当我增加一张幻灯片时，它现在变得紧张不安，与原来一次只显示三张幻灯片相反。什么能解决这个问题

这是原始教程

这是我尝试的JSBin

---

EDIT:@tsujp建议了一些可以解决部分问题的方法，但我们无法聊天，因此如果有人有更多的建议可以让它尽可能顺利运行，请随意添加。谢谢

如果您希望将高度设置为最高的div，您是否尝试设置

display:table而不是
显示：无？优秀的解决方案@tsujp，但这只会使每张幻灯片占据自己的高度。（PS:display:none在每张幻灯片处于活动状态时更改为display:block-因此我按照您的建议将其更改为display:table）-现在的问题是`#slider.slide.active{cursor:default；display:table！important；}“现在剩下的幻灯片在屏幕的100%高度处结束，当活动幻灯片的高度增加时，屏幕下方有空白，那么你到底想要什么？我还是有点困惑。这不是你想要的动态方面吗？我需要滑块（不仅仅是幻灯片）来获取最长幻灯片的高度-抱歉，如果我无法清楚地说出我需要什么，那么滑块只占据活动幻灯片的高度？例如，如果当前活动幻灯片为50px高，而下一张幻灯片为100px-只有在下一张幻灯片活动时才会更改为100px？因此，本质上，您只希望它们是每张幻灯片上最大元素的高度。