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

bootstrap carousel resizing image when changing slide

本文关键字：调整 图像 幻灯片 引导程序      更新时间：2023-09-26

嗨，所以我使用了命令：

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

就在我关闭body标签之前，以便让我的引导程序转盘自动启动并滚动。

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

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

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

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

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

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

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

相关文章：