Question

我有以下代码：

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

在index.html文件中。在同一个目录中有一个名为js的目录，其中包含boostrap.min.js，还有一个名为css的css目录，其中包含boostrap.min.css。最后，一个文件夹调用img，其中包含我在下载时给出的haphling图像，以及我画廊的图像。

基本上，它看起来像这样：

单击箭头时，图像不会改变。此外，我希望箭头在图像内，而不是像那样偏向右边。

Answer 1

看起来好像你没有使用bootstrap-carousel.js - 这是使用轮播功能所必需的。

我不知道您上面的代码是否构建自定义版本的Bootstrap（可在此处获取：http://twitter.github.com/bootstrap/customize.html），但如果您不是，则需要下载/包含（或远程调用）：

<script src="js/bootstrap-carousel.js"></script>

除了缩小的基础版本。

您可能希望考虑的一个新颖的附加/选项是：http://www.bootstrapcdn.com/这是一个好主意，可能会派上用场。

您还在调用 http:

时排除了//ajax.googleapis.com

希望这有帮助。

Answer 2

在HTML中使用Bootstrap Carousel的所有元素，并按照这样的方式记下Jquery

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

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

Answer 3

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

为什么来自Twitter Bootstrap的轮播不适合我？

3 个答案: