Twitter Bootstrap Carousel幻灯片不工作 [英] Twitter Bootstrap Carousel Slide Doesn't Work

问题描述

我试图实现Twitter Bootstrap Carousel插件。它看起来和自动循环正确，但项目之间的幻灯片效果不工作。它简单地静态替换一个项目与下一个。虽然它的功能，这是一个不太好的用户体验。

I'm trying to implement Twitter Bootstrap Carousel plug in. It looks and auto cycles correctly, but the slide effect between items does not work. It simply statically replaces one item with the next. While it's functional, this is a less than pleasing UX. Thoughts?

<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>

推荐答案

尝试：

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

Remove all the following js scripts you have loaded in your document:

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

只要按照同样的顺序保持下面的顺序（jQuery先行）

And just keep the following in that same order (jQuery goes first)

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

我相信的问题是，除了加载相同的脚本文件多次（bootstrap js文件已经包含所有的插件，所以不需要包括最小版本（保存为生产现在）或单个单独的脚本文件），您不加载包含在bootstrap.js文件中的转换脚本，因为顺序您的脚本正在载入。

The problem i believe is that, aside from loading the same script files multiple times (the bootstrap js file has all the plugins included already so no need to include the min version (save it for production for now) or the single separate script files), you're not loading the transition script included inside the bootstrap.js file because of the order that your scripts are loading in.

这篇关于Twitter Bootstrap Carousel幻灯片不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！