更改幻灯片时引导转盘调整图像大小

Question

您好，我使用了以下命令：

<script type='text/javascript'>
$(document).ready(function() {
     $('.carousel').carousel({
         interval: 4500
     })
});    

​

就在我的body结束标记之前，为了让我的bootstrap carousel自动启动和滚动。

问题是，最后一张幻灯片在滑回第一张幻灯片之前会短暂地调整到较小的高度(将整个页面向上移动)。

解释:所有的幻灯片图像都是相同的大小，并且在滑动时都以相同的大小显示。但在第一张幻灯片再次出现之前，最后一张幻灯片会迅速缩短(高度减小)(第一张幻灯片会以幻灯片的正确/原始高度显示回来)。这很烦人，因为幻灯片高度的暂时降低会导致整个页面向上移动。

为了澄清，最后一张幻灯片最初是在正确的高度开始的，然后在滑回第一张幻灯片之前的一瞬间，最后一张幻灯片的高度变短了。然后，第一张幻灯片将再次以正确的高度显示。

我不知道这是什么原因？

Answer 1

这是因为轮播幻灯片没有默认高度。若要使幻灯片保持一致的高度，请向幻灯片的css添加预定义的高度或最小高度。示例：

.carousel-inner .item {
min-height: 400px;
}

我使用min-height，以防我的内容在不同的设备上溢出。