Twitter Bootstrap Carousel not working (3.1.1)

Twitter Bootstrap Carousel not working (3.1.1)

本文关键字：working Bootstrap Carousel not Twitter      更新时间：2023-09-26

我正试图从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>

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

我这么说是因为你从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/

也许您直接打开html文件，而不是从服务器打开。那么CDN url将变成
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>

再试一次?

相关文章：