javascript - 更改幻灯片时 Bootstrap 轮播调整图像大小

Question

您好，我已经使用了命令:

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

就在我关闭 body 标签之前，以便让我的 bootstrap carousel 开始并自动滚动。

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

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

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

我不知道是什么原因造成的？

Answer 1

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

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

我使用最小高度以防我的内容在不同设备上溢出。