Twitter Bootstrap 轮播不滑动答案

【问题标题】：Twitter Bootstrap Carousel Not SlidingTwitter Bootstrap 轮播不滑动
【发布时间】：2012-05-26 12:07:50
【问题描述】：

我遇到了一个有趣的问题。我很确定答案很简单，但我就是想不通，所以我想寻求帮助。

基本上，我的旋转木马不会滑动。它只是切换图像。我什至尝试将引导站点中的确切 HTML 复制到我自己的页面中，但它仍然没有滑动。在application.js中，初始化也是没有参数的。

// carousel demo
$('#myCarousel').carousel()

我注意到在单击 pref/next 按钮时，next 和 prev 类被添加到每个项目中，但它似乎并没有对我做同样的事情。我调试的时候也没有发现什么问题。

我错过了什么？我在最新的 Chrome 和 Safari 中都对此进行了测试。

【问题讨论】：

Basically, my carousel doesn't slide. It just switches image. 所以轮播“正在”工作，只是没有幻灯片效果？
只是为了澄清一下，轮播正在工作，但没有幻灯片效果。我刚刚发现您还需要为任何动画包含 bootstrap-transition.js，并确保在 div 上添加一个名为“slide”的类，该类用作轮播的容器。直到 8 小时后我才能回答我自己的问题，但这就是问题的答案。

【解决方案1】：

您还必须添加bootstrap-transition 才能使滑动生效，如下所示：

<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>

【讨论】：

【解决方案2】：

我遇到了同样的问题，但是使用 bootstrap v2.0.3（其中捆绑了转换），最终将幻灯片类添加到轮播 div

<div id="myCarousel" class="carousel slide">

然后你只需调用：

$('#myCarousel').carousel();

【讨论】：

【解决方案3】：

我觉得你需要

$('#myCarousel').carousel('cycle');

【讨论】：

【解决方案4】：

这是一个工作示例。这可能是您遗漏的小事。 http://jsfiddle.net/chapmanc/Vza6F/1/

【讨论】：

【解决方案5】：

您是否只是将该 JavaScript 放在 <script> 标记中？

<script>
    $('.carousel').carousel({
        interval: 1000
    });
</script>

【讨论】：

【解决方案6】：

检查您已包含的 css 文件。除了 bootstrap.min.css 之外，尝试添加 bootstrap.css 文件。它对我有用。

【讨论】：