Question

我无法启动Bootstrap Carousel，嗯，旋转木马。下面是我正在尝试做的所有代码。当它在浏览器中呈现时，我看到的只有两个图像，一个在另一个之上，而在它们之下的图像小于大于它们。它只是渲染HTML定义的DIV而不是在Carousel中渲染。我验证了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>

Answer 1

这fiddle

似乎工作得很好

确保包含由引导程序为轮播定义的样式：小提琴中包含的css来自twitter-bootstrap custom download page仅选择 JS组件＆gt; 传送带

将<script>放在<head>内或页面末尾可能没什么坏处。

Answer 2

我明白了。我在rel="stylesheet"标记中遗漏了LINK！

Bootstrap轮播没有启动

2 个答案: