twitter-bootstrap - Twitter Bootstrap Carousel：最后一张幻灯片与第一张幻灯片重叠

Question

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

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

jsfiddle

"Links to jsfiddle must be accompanied be a code"

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

我究竟做错了什么？

Answer 1

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

底线是，我将<img>es 推送到每个 css 背景.carousel .item并应用以下 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. 我想它以后会引起一些头痛，但是...

Answer 2

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