在 Bootstrap Carousel 中滑动图像并排答案

【问题标题】：Sliding images in Bootstrap's Carousel next to eachother在 Bootstrap Carousel 中滑动图像并排
【发布时间】：2012-02-08 18:51:37
【问题描述】：

请看this link中的轮播。

有没有一种方法可以改变 Twitter Bootstrap 的轮播代码以使图像正确滑动，而不是像现在这样乱七八糟？

【问题讨论】：

你能具体说明一下目前有什么问题吗？
这个网站在 16:9 显示器上看起来真的很乱，你应该解决这个问题，我会开始你：#primary {background-color: white; height: 473px; width: 1000px; overflow: hidden;}

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

尝试添加到包含类名为“carousel”的轮播的外部 div，额外的类名：“slide”。

你会得到一个滑动轮播：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

【讨论】：

【解决方案2】：

我查看了您的代码，您的所有图像都包含在 <div class="item">...</div> 中，这是正确的。但是，其中之一必须设置为 active，因此您需要将其中之一设置为 <div class="item active">。

【讨论】：

其中一个通过 jQuery 代码激活，如下所示：$('.item:first').addClass('active');