Twitter Bootstrap 轮播不滑动

Posted 2023-02-16

【中文标题】Twitter Bootstrap 轮播不滑动

【英文标题】：Twitter Bootstrap Carousel Not Sliding

【发布时间】：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>

【讨论】：

只有在使用 bootstrap.js 的非缩小版本时才适用。缩小的包含转换代码。

@MichaelTeper 的上述提示是我的赢家，解决了我的问题。赞成。应该是一个独立的答案。谢谢迈克尔。

【参考方案2】：

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

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

然后你只需调用：

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

【讨论】：

如果您使用的是 bootstrap 1.x - 尝试使用 bootstrap 2.x - 它为我修复了它

在 bootstrap 3 中添加 slide 类也对我有用。

【参考方案3】：

我觉得你需要

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

另请参阅： How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案6】：

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