Bootstrap 3轮播不工作
Posted
技术标签:
【中文标题】Bootstrap 3轮播不工作【英文标题】：Bootstrap 3 Carousel Not Working 【发布时间】：2014-01-05 13:11:55 【问题描述】：Bootstrap 中的轮播不会显示我的图像或对控件做出反应。
这是我的 html：
<!DOCTYPE HTML>
<html>
<head>
<title>Skates R Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
Skates R Us
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">Home</a>
</li>
<li>
<a href="contact.html">Contact / About</a>
</li>
<li>
<a href="shop.html">Shop</a>
</li>
<li>
<a href="new.html">New Products</a>
</li>
<li>
<a href="media.html">Media</a>
</li>
</ul>
</div>
</div>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0"></li>
<li data-target="carousel" data-slide-to="1"></li>
<li data-target="carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/slide_1.png" >
</div>
<div class="item">
<img src="img/slide_2.png" >
</div>
<div class="item">
<img src="img/slide_3.png" >
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#carousel").carousel();
</script>
</body>
</html>
我的 CSS：
#carousel
margin-top: 50px;
.carousel
height: 500px;
margin-bottom: 60px;
/* Since positioning the image, we need to help out the caption */
.carousel-caption
z-index: 10;
/* Declare heights because of positioning of img element */
.carousel .item
width: 100%;
height: 500px;
background-color: #777;
.carousel-inner > .item > img
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
@media (min-width: 768px)
.carousel-caption p
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
img
background: red;
Chrome 控制台中没有错误，代码与 Bootstrap 示例中的代码几乎完全相同。
这就是我的网站的样子：
【问题讨论】：
可能是因为您没有准备好 jQuery 文档的代码：learn.jquery.com/using-jquery-core/document-ready 您使用的是哪个版本的 Bootstrap？ 2.3.2 还是 3.0？ 我使用的是 Bootstrap 3.0 你从哪里得到的 css？ Bootstrap 站点上的示例。 getbootstrap.com/examples/carousel 【参考方案1】：这里只有两件小事。
第一个是在以下轮播指示器列表项中：
<li data-target="carousel" data-slide-to="0"></li>
您需要将data-target 属性传递给选择器，这意味着ID 必须以# 为前缀。所以将它们更改为以下内容：
<li data-target="#carousel" data-slide-to="0"></li>
其次，您需要给轮播一个起点，这样轮播指示器项和轮播内部项都必须有一个active 类。像这样：
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<!-- Other Items -->
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1500/600?image=1" />
</div>
<!-- Other Items -->
</div>
Working Demo in Fiddle
【讨论】：
@user2133268，当你提出问题时，你真的应该尽可能多地努力使它成为一个好的问题。这里有 ton 的代码与您的示例无关。您通常应该尝试将您的代码放入 jsfiddle.net 或 bootply.com，以便其他人可以立即对其进行调试。您应该从文档中的一个工作示例开始，并逐行比较以查看其不同之处。这些都是你可以掌舵回答你自己的问题的所有方式。他们授权你。这是一种很好的礼仪，但它也能让你在编程方面做得更好。 SO 如果您必须发布 jsfiddle 链接，则特别强制在帖子中发布代码！ @KyleMit【参考方案2】：这里是你需要做的改变
只需将轮播 div 替换为以下代码
您错过了数据目标的“#”并为第一项添加活动类
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide_1.png" >
</div>
<div class="item">
<img src="img/slide_2.png" >
</div>
<div class="item">
<img src="img/slide_3.png" >
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
【讨论】：
【参考方案3】：好吧，Bootstrap Carousel 有各种参数可以控制。
即
间隔：指定每张幻灯片之间的延迟（以毫秒为单位）。
暂停：当鼠标指针进入轮播时暂停轮播通过下一张幻灯片，当鼠标指针离开轮播时继续滑动。
wrap: 指定轮播是连续遍历所有幻灯片，还是在最后一张幻灯片停止
供您参考：
更多详情请click here...
希望对你有帮助:)
注意：这是为了进一步的帮助。我的意思是，一旦轮播加载完毕，您如何自定义或更改默认行为。
【讨论】：
这是为了进一步的帮助。我的意思是一旦加载轮播，你如何自定义或更改默认行为。【参考方案4】：最近我正在帮助一位朋友找出他们的轮播不工作的原因。控件不起作用，图像没有过渡。我在我使用过的页面上有一个工作示例，我们检查了所有代码，包括检查这篇文章中的上述项目。我们将“好”轮播粘贴到同一页面中，它仍然有效。现在，所有的 css 和 bootstrap 文件都是一样的。代码现在是相同的，所以我们只能尝试图像。
因此，我们用我的示例中的两个图像替换了这些图像。有效。我们用最初不起作用的前两个图像替换了这两个图像，并且它起作用了。我们将每个图像（所有 jpeg）一张一张地添加回来，当我们到达第七张图像（共 18 张）时，轮播失败了。诡异的。我们删除了这一个图像并继续添加剩余的图像，直到它们都被添加并且轮播工作。
作为参考，我们在此站点上使用了 jquery-3.3.1.slim.min.js 和 bootstrap/4.3.1/js/bootstrap.min.js。
我不知道为什么图像会或可能导致轮播出现故障，但确实如此。我在其他地方也找不到对这个原因的参考，所以我在这里发帖以供后人使用，希望在其他解决方案失败时它可以帮助其他人。
使用有限的“已知良好”图像集测试轮播。
【讨论】：
就我而言，在阅读了您的回答后，我发现 CSS 文件没问题，但缺少一个 javascript 文件。包含 Bootstrap 的bootstrap.min.js 文件，它工作正常。谢谢。留下评论，因为它可能对未来的其他人有所帮助。【参考方案5】：
对我来说，DreamWeaver CC 中的轮播无法正常工作，我正在使用的“模板”页面中提供了代码。我需要将 data-ride="carousel" 属性添加到 carousel div 以便它开始工作。感谢 Adarsh 的代码 sn-p 突出了缺失的属性。
【讨论】：
以上是关于Bootstrap 3轮播不工作的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap 轮播craousel 采坑之（修改默认鼠标浮动轮播不停止）
在 python Django 中的 ajax 成功后，猫头鹰轮播不工作