Bootstrap轮播，带有封面图像和指示灯

Question

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

但是，我需要每个图像覆盖＆＃39;包含div。因此，如果它与图像的比例不同，则顶部和图像的比例不同。底部或左边＆amp;右边是不可见的 - 避免黑条。

我还需要左边和右边的存在右侧导航按钮，以及允许导航和点播的点指示器。供用户查看他们所在的图像。

我还需要每张幻灯片中的文字随每张幻灯片而变化/不是静态的。我发现了这个，但它有静态文本 - 我无法移动文本 - 它也缺少导航按钮和点指示符： https://bootsnipp.com/snippets/featured/fullscreen-background-carousel

我该怎么做？ THX。

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