Question

我正试图从Twitter Bootstrap 3.1.1获得一个简单的轮播。我已经将它剥离到简单的通用Bootstrap标记，没有任何样式，但我仍然没有运气让图像滑动。将不胜感激任何建议。我的加价如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="test/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
    <style type="text/css">
      .container{
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- carousel -->
      <div id="this-carousel-id" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
            <img src="images/sample1.svg" alt="" />
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
              <img src="images/sample2.svg" alt="" />
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
              <img src="images/sample3.svg" alt="" />
            <div class="carousel-caption">
            </div>
          </div>
        </div>
      <!-- .carousel-inner -->
      <!--  next and previous controls here
            href values must reference the id for this carousel -->
        <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
      </div>
      <!-- .carousel -->
      <!-- end carousel -->
    </div><!-- /container -->

    <!-- Javascript-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <!-- Bootstrap jQuery plugins compiled and minified -->
    <script src="js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.carousel').carousel({
          interval: 4000
        });
      });
    </script>
  </body>
</html>

Answer 1

可能是因为您没有指向bootstrap.min.js的CDN版本。

我之所以这样说，是因为您引用了来自CDN位置的jquery和css，但您正在寻找bootstrap.min.js作为您网站的本地内容。这是你如何配置的？

将其更改为使用

http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js

请参阅http://jsfiddle.net/8vvqf/

Answer 2

也许您直接打开html文件，而不是从服务器打开。然后CDN网址将成为
file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

变化
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
到
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

然后再试一次？

Twitter Bootstrap Carousel不工作（3.1.1）

2 个答案: