Twitter Bootstrap Carousel Slide不起作用

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文件已经包含了所有插件,所以不需要包含最小版本(现在保存它用于生产)或单个单独的脚本文件) ,您没有加载bootstrap.js文件中包含的转换脚本,因为脚本的加载顺序.

Answer 2

经过一段时间的努力,我找到了解决方案 - 你只需要包含

引导-transition.js

幻灯片动画将起作用.