使用 bootstrap-carousel.js 失败答案

【问题标题】：failed using bootstrap-carousel.js使用 bootstrap-carousel.js 失败
【发布时间】：2012-02-10 12:00:41
【问题描述】：

试图查看以下htm，但我没有得到与

中相同的结果

http://twitter.github.com/bootstrap/javascript.html - 轮播

js/Default.js:

 $(function () {
    //    $('.carousel').carousel({ interval: 2000 })

        $('#myCarousel').carousel()
            });

标记：

    <head>
        <link href="Resources/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
        <title></title>
    </head>

    <body>
        <h2>Example carousel</h2>
        <p>Watch the slideshow below.</p>
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="Images/Browser/add.JPG" />
                    <div class="carousel-caption">
                        <h4>First Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Browser/delete.JPG" />
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Browser/rename.JPG" />
                    <div class="carousel-caption">
                        <h4>Third Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
        <script src="Resources/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/Common.js"></script>
        <script type="text/javascript" src="Resources/Scripts/bootstrap-carousel.js"></script>
        <script src="js/Default.js" type="text/javascript"></script>
    </body>

</html>

【问题讨论】：

您粘贴的 html 看起来符合轮播插件的要求。我唯一看不到的可能是您的问题：您需要包含 jquery、主 bootstrap.js 以及 bootstrap-carousel.js 文件。
都导入到的底部
当你说你没有得到与演示相同的结果时，你得到了什么？有什么不同或错误？也许如果您尝试包含整个 bootstrap.js 文件，而不是仅包含轮播？
你得到这样的东西吗？我注意到当我复制你的内容时它不会滚动...jsfiddle.net/dsummersl/5BMr8/2
@periklis 我将所有 3 个步骤（3 张照片 + 3 个字幕）作为项目的垂直列表。我不认为这是一个常见的 bootstrap.js

标签： javascript jquery twitter-bootstrap

【解决方案1】：

正如我在上面的 cmets 中提到的，如果您只看到与引导程序的幻灯片放映 UI 没有相似之处的未格式化项目列表，那么您可能没有引用引导程序 CSS 文件（可能您的 URL 错误）。使用浏览器中的“Web Inspector”或“Developer Tools”确保确实找到了您所包含的 JS 和 CSS 文件（如果没有，您会看到红色文本！）。

为了帮助您实现此功能，我使用您的原始文本创建了一个最小的工作 jsfiddle 示例：

example implementation

让旋转木马工作所需的基本步骤是：

使用 carousel、carousel-inner 和 item 类正确格式化您的 html（您做对了）。
包含 bootstrap.css 文件。
包括以下 javascript 文件：jquery、bootstrap-transition、bootstrap-carousel

【讨论】：

如何使灰色字幕+照片适合中等大小（不是全屏）和居中的 div？我试图放入一个具有适当高度和宽度的 div - 但它仍然遍布屏幕宽度
我希望它看起来像这里的示例twitter.github.com/bootstrap/javascript.html（在轮播下）
我的第一个猜测是你应该使用 bootstrap spanX 类——但我不确定你到底想要什么。您能否修改 jsfiddle 并向我发送一个链接，以便我更好地了解您的目标？
我现在做到了。它是否保存在 jsfiddle 上？我希望轮播位于页面中心，而不是整个屏幕宽度。
在这里我将 .carousel 对齐在中心 (80%) - 这就是您要找的吗？ jsfiddle.net/dsummersl/5BMr8/14