Twitter Bootstrap Carousel：最后一张幻灯片与第一张幻灯片重叠答案

【问题标题】：Twitter Bootstrap Carousel: last slide overlaps the first slideTwitter Bootstrap Carousel：最后一张幻灯片与第一张幻灯片重叠
【发布时间】：2013-04-29 10:36:39
【问题描述】：

我遇到了 Bootstrap 的 Carousel 的问题：当幻灯片比 Carousel div 宽时，最后一张幻灯片与第一张幻灯片重叠。

Jsfiddle，描述问题（向前滚动并观察最后一张幻灯片如何与第一张重叠）

jsfiddle

"Links to jsfiddle must be accompanied be a code"

另外，我刚刚注意到，在第一次之后，当轮播从最后一张幻灯片转到第一张幻灯片时，轮播指示器停止突出显示当前幻灯片编号。

我做错了什么？

【问题讨论】：

标签： twitter-bootstrap carousel

【解决方案1】：

对于 Bootstrap 3，我在使用旧 jQuery 版本 (1.7) 时遇到了同样的问题。 Bootstrap 3 的 jQuery 应该是 1.9.1 或更新版本。

【讨论】：

【解决方案2】：

好的，我已经在 this answer 的帮助下解决了这个问题。

底线是，我将 <img>es 推送到每个 .carousel .item 的 css 背景并应用了以下 csses：

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    /* background-size: cover; */ /* I don't wanna (up|down)scale */
    height: 510px; /* fixed height of the background images */
}

#carousel-item-1 {
    background-image: url(myImage.jpg);
}

#carousel-item-2 {
    background-image: url(myImage.jpg);
}

#carousel-item-3 {
    background-image: url(myImage.jpg);
}

一个令人愉快的副作用是它还可以将图像水平和垂直居中（裁剪它们），这也是我需要的。

我认为这种方式是正确的，我应该从一开始就使用它。但我不太喜欢固定的手写height: 510px。我想它以后会引起一些头痛，但是...

【讨论】：