Javascript 为什么推特引导的旋转木马对我不起作用？_Javascript_Html_Css_Twitter Bootstrap

Javascript 为什么推特引导的旋转木马对我不起作用？

javascript html css twitter-bootstrap

Javascript 为什么推特引导的旋转木马对我不起作用？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我有以下代码： <html> <head> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/bootstrap.min

我有以下代码：

<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.carousel').carousel();
          });
        </script>
    </head>

    <body>
        <div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div class="item active"><!-- class of active since it's the first item -->
              <img src="img/image1.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image4.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image3.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image2.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image1.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below
                href values must reference the id for this carousel -->
            <a class="carousel-control left" href="#welcome-carousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#welcome-carousel" data-slide="next">&rsaquo;</a>
        </div>
    </body>
</html>


$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});
世界你好
世界你好
世界你好

它位于index.html文件中。在同一个目录中，有一个名为js的目录，其中包含boostrap.min.js，还有一个名为css的css目录，其中包含boostrap.min.css。最后，一个名为img的文件夹，其中包含我下载时TB提供的haphling图像，以及我的图库中的图像

基本上，它看起来是这样的：

当我单击箭头时，图像不会改变。另外，我希望箭头位于图像内，而不是像那样向右。

看起来您没有拉入

引导旋转木马.js

——这是使用旋转木马功能所必需的

从上面的代码中，我不知道您是否正在构建自定义版本的引导程序（可在此处获得），但如果您不是，则需要下载/包括（或远程调用）：

除了缩小的基本版本之外

你可能想考虑的一个新的补充/选择是：这是一个好主意，可能会派上用场。在调用

//ajax.googleapis.com

希望这有帮助。

在HTML中使用Bootstrap Carousel的所有元素，并像这样写下Jquery

<script type="text/javascript">
!function ($) {
     var $window = $(window)

    $(document).ready(function() {
        $('.carousel').carousel();
    });
} (window.jQuery)
</script>


!函数（$）{
变量$window=$（窗口）
$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});
}（window.jQuery）

在iOS Safari上的转盘出现问题，发现一个线程表示包含的.css文件错误地忽略了某些浏览器的浏览器前缀。我的错误稍有不同（无法加载幻灯片图像），我用当前版本替换了以前的bootstrap.css文件（已使用3.2.1更新为3.3.2），这解决了问题。我喜欢一个简单的解决方案。

控制台中有错误吗？你似乎在效仿结核病的例子，很难看到。您是否将其更改为完全复制示例？另外：

//ajax.googleapis.com

！？前缀为

http:

我正在使用一个定制的，所以它被包括在内。问题是nickhar在评论中指出的，缺少http:，但是你的网站（顺便说一句，我很喜欢，谢谢）也省略了它，这给了我很多问题，直到我把它加回来。他们为什么这样做？@DougSmith这很奇怪，不是吗，但很高兴你解决了它！：）在我的回答中包括

http:

：）另外，您使用的浏览器是什么？Chrome只接受了

，但经验让我对其他人更加警惕……我正在使用Safari。谢谢你的回答。：）

<script type="text/javascript">
!function ($) {
     var $window = $(window)

    $(document).ready(function() {
        $('.carousel').carousel();
    });
} (window.jQuery)
</script>