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

Question

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

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

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

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

我该怎么做？谢谢。

Answer 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 样式。