Bootstrap 轮播，带有封面图片和指示器

Posted 2023-03-21

【中文标题】Bootstrap 轮播，带有封面图片和指示器

【英文标题】：Bootstrap carousel, with cover images and indicators

【发布时间】：2017-12-16 21:57:27

【问题描述】：

我需要一个（响应式）引导轮播 - 很像标准示例： http://getbootstrap.com/javascript/#carousel

但是，我需要每个图像“覆盖”包含的 div。因此，如果它与图像的比例不同，则顶部和底部或左右将不可见 - 避免出现黑条。

我还需要存在左右导航按钮，以及允许导航和让用户查看他们在哪个图像上的点指示器。

我还需要每张幻灯片中随每张幻灯片更改的文本/不是静态的。我找到了这个，但它有静态文本——我无法让文本移动——它也缺少导航按钮和点指示器： https://bootsnipp.com/snippets/featured/fullscreen-background-carousel

我该怎么做？谢谢。

【参考方案1】：

如果您可以使用背景图片，您可以使用 CSS 属性 background-size: cover 使背景图片覆盖整个轮播幻灯片 div。然后您的文本也将在幻灯片 div 内并位于背景图像的顶部。 You can read more about background-size here.

Here is a Fiddle demonstrating the use of background images with background-size: cover.

如果您需要在img 标记中加载图像，那么您可以使用this solution，它使用JavaScript 来确定图像是宽还是高，然后应用适当的CSS 样式。

【讨论】：

谢谢 - 是否可以添加一个代码示例来实现您的建议，我不清楚具体该怎么做？我对是否使用背景图片没有强烈的看法。

@nicco - 我在我的答案中添加了 Fiddle 链接。我认为使用背景图像很好。只需知道，如果您希望幻灯片的高度（类 .item）都具有相同的高度，则应该使用 CSS 设置它们的高度。