1

我有以下代码：

<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 的目录，其中包含 boostrap.min.css。最后，一个名为 img 的文件夹，其中包含我下载时 TB 提供的 haphling 图片，以及我画廊的图片。

基本上，它看起来像这样：http://i.imgur.com/YnRtq.png

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

4

3 回答 3

2

看起来好像您没有参与进来bootstrap-carousel.js- 这是使用 Carousel 功能所必需的。

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

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

除了缩小的基础版本。

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

您还排除了http:in call//ajax.googleapis.com

希望这可以帮助。

于 2012-11-05T00:04:13.173 回答
0

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

于 2015-02-12T12:50:07.033 回答
0

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

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

    $(document).ready(function() {
        $('.carousel').carousel();
    });
} (window.jQuery)
</script>
于 2013-02-08T19:09:09.193 回答