gpt4 book ai didi

javascript - 使用 bootstrap-carousel.js 失败

转载 作者:行者123 更新时间:2023-11-30 13:23:57 25 4
gpt4 key购买 nike

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

最佳答案

正如我在上面的评论中提到的,如果您只看到一个未格式化的项目列表,这些项目与 Bootstrap 的幻灯片放映 UI 没有相似之处,那么您可能没有引用 Bootstrap CSS 文件(可能是您的 URL 错误)。使用浏览器中的“Web 检查器”或“开发人员工具”,确保确实找到了您包含的 JS 和 CSS 文件(如果找不到,您会看到红色文本!)。

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

example implementation

让轮播工作所需的基本步骤是:

  1. 使用 carouselcarousel-inneritem 类(您做对了)正确格式化您的 html。

  2. 包含 bootstrap.css 文件。

  3. 包括以下 javascript 文件:jquery、bootstrap-transition、bootstrap-carousel


关于javascript - 使用 bootstrap-carousel.js 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9227416/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com