使用bootstrap-carousel.js失败

failed using bootstrap-carousel.js

本文关键字：失败 js bootstrap-carousel 使用      更新时间：2023-09-26

尝试查看以下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>

正如我在上面的评论中所提到的，如果你只看到一个未格式化的项目列表，而这些项目与引导程序的幻灯片显示UI没有重新集成，那么你可能没有引用引导程序CSS文件（可能你的URL错误）。使用浏览器中的"Web检查器"或"开发工具"来确保您包含的JS和CSS文件确实被找到（如果没有，您将看到红色文本！）。

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

示例实现

使转盘工作所需的基本步骤是：

  1. 使用carousel、carousel-inner和item类正确格式化html（您确实做得很正确）。

  2. 包括bootstrap.css文件。

  3. 包括以下javascript文件：jquery、引导程序转换、引导程序转盘

相关文章：