0

我无法让 Bootstrap Carousel 启动，嗯，carousel-ing。以下是与我正在尝试做的事情有关的所有代码。当它在浏览器中呈现时，我只看到两张图像，一张在另一张上方，一张小于和一张在它们下方。它只是呈现由 HTML 定义的 DIV，而不是在轮播中呈现。我验证了 jQuery.ready 函数正在被调用，并且正在调用代码来初始化轮播。我还在多个浏览器上尝试过这个——IE9、Chrome 和 Firefox。我的想法不多了。任何帮助，将不胜感激。谢谢！

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link type="text/css" href="styles/carousel.css" />

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>

</head>
<body>
    <script type="text/javascript">

        $(function () {
            $('#carousel').carousel();
        });

    </script>

    <div id="carousel" class="carousel">

      <div class="carousel-inner">

        <div class="item active">
           <img src="images/APM_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        <div class="item">
           <img src="images/appdev_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        …

      </div>

      <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
       <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>

    </div>
</body>
</html>
4

2 回答 2

1

在这个小提琴中似乎工作得很好

确保包含 bootstrap 为 carousel 定义的样式：fiddle 中包含的 css 来自twitter-bootstrap 自定义下载页面，仅选择JS components > Carousel。

<script>将您的内容放在页面内部<head>或页面末尾可能不会有什么坏处。

于 2012-07-18T18:15:48.840 回答
0

我想到了。rel="stylesheet"我的LINK标签中缺少一个！

于 2012-07-23T01:50:02.530 回答