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>

- d_meyer

---

你在测试哪个浏览器？ - Andres Ilich

警告读者：确保您还将“slide”类添加到旋转木马div中，否则您将遇到相同的症状（图像更改但未动画化）。这个线程中发布并解决了一个类似的问题（请参见第二条评论）：https://dev59.com/0Wgv5IYBdhLWcg3wW_h_ - Marco Panichi

Answer 1

尝试这样做：

移除您文档中已加载的以下所有JavaScript脚本：

<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文件已经包含所有插件，因此不需要包含min版本（现在将其保存到生产环境中）或单独的脚本文件），由于您的脚本加载顺序，您没有加载包含在bootstrap.js文件内部的transition脚本。

- Andres Ilich

Answer 2

在苦苦挣扎一段时间后，我找到了一个解决方案——你只需要引入

bootstrap-transition.js

就能使幻灯片动画起作用。

- Martin Wright

---

Andres Ilich的回答表明，bootstrap-transition.js代码实际上已经包含在主bootstrap.js中。如果是这样的话，你的答案就不正确了--没有必要额外加载bootstrap-transition.js文件。 - trejder

这就是答案，我不知怎么把它在bootstrap.js里注释掉了。 :D - Michael

Answer 3

如果我正在使用 class="carousel" 作为轮播容器，那么交易就成立了。

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

这段代码只适用于一次左右点击，而且表现得相当好（但仅限一次）。

如果使用 class="carousel slide"，

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

然后轮播切换，但没有滑动动画效果。

- koles

---

$('.carousel .slide') е’Ң $('.carousel.slide')пјҲжІЎжңүз©әж јпјүдёҚеҗҢгҖӮеҗҺиҖ…еҸҜд»ҘжӯЈеёёе·ҘдҪңпјҢиҖҢеүҚиҖ…еҸӘжңүеңЁclass=slideжҳҜclass=carouselзҡ„еӯҗе…ғзҙ ж—¶жүҚиғҪиө·дҪңз”ЁгҖӮ - Steve Perks

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文件。为此，您可以在页面顶部添加引用。

- Shemeemsha R A

Answer 5

尽管这个问题已经得到了成功的回答 - 我来到这里寻找类似问题的答案。

我的轮播图中第一项向左滑动，像正常情况一样，但第二项并没有在其后面。一旦第一项离开屏幕，第二项就会出现，而不是滑入。然后它会消失，第一项会正确地滑入。

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

我是这样添加的：

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

原来是这个问题搞得一团糟。移除position:relative;就解决了这个问题。现在滑动流畅而且正确。

- Steve