Twitter Bootstrap 轮播幻灯片不起作用

Question

我正在尝试实现 Twitter Bootstrap 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>

Answer 1

试试这个：

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

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

然后按照相同的顺序保持以下顺序（jQuery 优先）

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

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

Answer 2

在为此苦苦挣扎了一段时间后，我找到了solution - 你只需要包含

bootstrap-transition.js

幻灯片动画将起作用。

Answer 3

如果我将 class="carousel" 用于轮播容器和

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

它只适用于一次左/右键单击并且工作得非常好（但只适用于一次）。

如果使用class="carousel slide" 和

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

然后轮播切换但没有幻灯片动画效果。

Answer 4

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

Bootstrap 3 中没有“slide”类的定义。但是没有“Slide”类，轮播图像会发生变化而没有任何动画效果..

在你的代码中添加这个脚本

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

检查代码中的 Bootstrap CSS 和 JS 参考。 并检查参考文件的顺序

你可以按照这个顺序：-

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

如果没有 JQ 库，脚本块将无法工作..因此请正确添加 JQ 库文件..

并确保在脚本工作之前加载 JQ 文件。为此，您可以在页面顶部添加参考

Answer 5

即使这个问题得到了成功的回答 - 我来这里是为了寻找类似问题的答案。

我在轮播中的第一个项目像往常一样向左滑动，但第二个项目不在它后面。一旦第一个项目离开屏幕，第二个项目只会出现，不会滑入。然后它会消失，第一个项目会正常滑入。

如果您遇到此问题，请检查您是否没有 position:relative;在 .item div 上。

我是这样添加的：

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

事实证明，事情变得一团糟。拆卸位置：相对；解决了这个问题。现在滑动顺畅且正确。