Question

我遇到了Bootstrap旋转木马的问题：当幻灯片宽度超过Carousel div时，最后一张幻灯片与第一张幻灯片重叠。

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

"Links to jsfiddle must be accompanied be a code"

另外，我刚才注意到，第一次，当旋转木马从最后一张幻灯片转到第一张幻灯片时，旋转木马指示器停止突出显示当前的幻灯片编号。

我做错了什么？

Answer 1

好的，我的工作 - 在this answer的帮助下解决了这个问题。

最重要的是，我将<img> es推送到每个.carousel .item的css背景并应用了以下内容：

.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）时遇到了同样的问题。 jQuery for Bootstrap 3应该是1.9.1或更新版本。

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

2 个答案: