Javascript 推特引导转盘幻灯片不'；行不通

我正在尝试实现Twitter引导Carousel插件。它看起来和自动循环正确，但项目之间的滑动效果不起作用。它只是静态地用下一项替换一项。虽然它是功能性的，但这不是一个令人愉快的用户体验。想法

<div class="span7">
        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
              <img src="img/CoachellaValley.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 1</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley2.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 2</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley3.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 3</h4>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
  $(function(){
    $('#myCarousel').carousel();
  })
  </script>

赞助商1
赞助商2
赞助商3
[...]
$（函数（）{
$（#myCarousel'）.carousel（）；
})

试试这个：

删除您在文档中加载的以下所有js脚本：

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>

只需按相同的顺序保持以下内容（jQuery优先）

---

我认为问题在于，除了多次加载相同的脚本文件（bootstrap js文件已经包含了所有插件，因此不需要包含min版本（暂时保存以供生产使用）或单个单独的脚本文件）之外，由于脚本的加载顺序，您没有加载bootstrap.js文件中包含的转换脚本。

如果我对carousel容器和

$('.carousel').carousel('slide',{interval:1000});

它只适用于左键\右键单击一次，效果非常好（但只适用于一次）

如果使用

class=“旋转木马幻灯片”

及

---

然后旋转木马切换，但没有幻灯片动画效果。

经过一段时间的努力，我发现了一个-你只需要包括

bootstrap-transition.js

幻灯片动画也会起作用

您的代码是正确的。。 在我的系统中，这段代码运行良好

Bootstrap 3中没有“slide”类的定义。但是如果没有“slide”类，旋转木马图像将在没有任何动画效果的情况下更改

在代码中添加此脚本

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});

检查代码中的引导CSS&JS引用。。 并检查参考文件的顺序

您可以按照以下顺序操作：-

bootstrap.css

bootstrap-theme.css

jquery-1.9.1.js

bootstrap.js

脚本块在没有JQ库的情况下无法工作。因此，请正确添加JQ库文件

---

并确保在脚本运行之前加载JQ文件。为此，您可以在页面顶部添加引用

，即使此问题已成功回答-我来这里是为了寻找类似问题的答案

我在旋转木马中的第一件物品像平常一样向左滑动，但第二件物品不在后面。一旦第一个项目离开屏幕，第二个项目就会出现，而不是滑入。然后它会消失，第一个项目会适当地滑入

如果你有这个问题，检查你没有位置：相对；在.item div上

我补充说：

.carousel-inner > .item {
    position:relative;
    height:495px;
}

---

结果把事情搞砸了。拆卸位置：相对位置；修正了这个问题。现在滑动是平滑和正确的。

您正在测试的浏览器是什么？警告读者：请确保您还将类“slide”添加到旋转木马div，否则您将遇到相同的症状（图像更改但未设置动画）。在此线程中发布并解决了一个类似的问题（请参见第二条注释）：

$（'.carousel.slide'）

与

$（'.carousel.slide'）

不同（没有空格）。后者会起作用，而前者的目标是

class=slide

，只有当它是

class=carousel

的孩子时，安德烈斯·伊里奇（Andres Ilich）在上面的回答中指出，

bootstrap transition.js

代码实际上已经包含在main

bootstrap.js

中。如果这是真的，您的答案将变得不正确——不需要额外加载

bootstrap transition.js

文件。这就是答案，我不知怎么在bootstrap.js中被注释掉了：D

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

.carousel-inner > .item {
    position:relative;
    height:495px;
}