Twitter Bootstrap传送带不工作（3.1.1）

我想从Twitter Bootstrap 3.1.1获得一个简单的传送带工作。我将它简化为简单的通用Bootstrap标记，没有样式，但我仍然没有运气让图像滑动。将不胜感激任何建议。我的标记如下：Twitter Bootstrap传送带不工作（3.1.1）

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

来源

2014-06-13 KPL

确定javascript代码全部正确加载了吗？您指向的是相对路径的js/bootstrap.min.js。你的js目录与你正在运行的页面处于同一级别吗？ – jaapz

谢谢 - 是的，我已将它重定向到：http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js 现在可以使用。 – KPL

这可能是因为你没有指向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/

来源

2014-06-13 12:23:20

就是这样！修正了它 - 谢谢你！ – KPL

也许你直接打开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>

，然后再试一次？

来源

2014-06-13 13:08:48 szmtcjm

我试过了，没有成功。 – KPL

Twitter Bootstrap传送带不工作（3.1.1）

回答

相关问题