Html Bootstrap 3 轮播不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20639825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Carousel Not Working
提问by Liam Potter
My carousel from Bootstrap won't display my images or react to the controls.
我的 Bootstrap 轮播不会显示我的图像或对控件做出反应。
This is my HTML:
这是我的 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" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</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>
My CSS:
我的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;
}
There are no errors in the Chrome console and the code is pretty much the exact same as that from the Bootstrap examples.
Chrome 控制台中没有错误，代码与 Bootstrap 示例中的代码几乎完全相同。
This is what the site looks like on my end:
这就是我所看到的网站的样子：
回答by KyleMit
There are just two minor things here.
这里只有两件小事。
The first is in the following carousel indicator list items:
第一个是在以下轮播指示器列表项中：
<li data-target="carousel" data-slide-to="0"></li>
You need to pass the data-targetattribute a selectorwhich means the ID must be prefixed with #. So change them to the following:
您需要向data-target属性传递一个选择器，这意味着 ID 必须以#. 因此，将它们更改为以下内容：
<li data-target="#carousel" data-slide-to="0"></li>
Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one activeclass. Like this:
其次，您需要为轮播提供一个起点，以便轮播指示器项目和轮播内部项目都必须有一个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" alt="Slide 1" />
</div>
<!-- Other Items -->
</div>
Working Demo in Fiddle
Fiddle 中的工作演示
回答by Adarsh Gowda K R
Here is the changes you need to be done
这是您需要完成的更改
just replace the carousel div with the below code
只需用下面的代码替换轮播div
You have missed the '#' for data-target and add active class for the first item
您错过了数据目标的“#”并为第一项添加了活动类
<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" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</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>
回答by Vikash Pandey
Well, Bootstrap Carousel has various parameters to control.
好吧，Bootstrap Carousel 有各种参数需要控制。
i.e.
IE
Interval:Specifies the delay (in milliseconds) between each slide.
间隔：指定每张幻灯片之间的延迟（以毫秒为单位）。
pause:Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel.
pause：当鼠标指针进入轮播时暂停轮播通过下一张幻灯片，并在鼠标指针离开轮播时恢复滑动。
wrap:Specifies whether the carousel should go through all slides continuously, or stop at the last slide
wrap：指定轮播是连续遍历所有幻灯片，还是停在最后一张幻灯片
For your reference:
供你参考：
Fore more details please click here...
欲知更多详情，请点击这里...
Hope this will help you :)
希望能帮到你 ：）
Note:This is for the further help.. I mean how can you customise or change default behaviour once carousel is loaded.
注意：这是为了进一步的帮助。我的意思是，一旦加载了轮播，您如何自定义或更改默认行为。
回答by srattigan
Recently I was helping a friend to find why their carousel was not working. Controls would not work and images were not transitioning. I had a working sample on a page I had used and we went through all the code including checking the items above in this post. We pasted the "good" carousel into the same page and it still worked. Now, all css and bootstrap files were the same for both. The code was now identical, so all we could try was the images.
最近，我正在帮助一位朋友找出他们的旋转木马不工作的原因。控件不起作用，图像没有过渡。我在我使用过的页面上有一个工作示例，我们完成了所有代码，包括检查这篇文章中的上述项目。我们将“好”轮播粘贴到同一页面中，它仍然有效。现在，所有 css 和 bootstrap 文件都相同。代码现在是相同的，所以我们只能尝试图像。
So, we replaced the images with two that were working in my sample. It worked. We replaced the two images with the first two that were originally not working, and it worked. We added back each image (all jpegs) one-by-one, and when we got to the seventh image (of 18) and the carousel failed. Weird. We removed this one image and continued to add the remaining images until they were all added and the carousel worked.
因此，我们用在我的示例中工作的两个图像替换了这些图像。有效。我们用最初不起作用的前两个图像替换了两个图像，并且它起作用了。我们将每个图像（所有 jpeg）一个一个地添加回来，当我们到达第七个图像（共 18 个）时，轮播失败了。奇怪的。我们删除了这一张图片并继续添加剩余的图片，直到它们全部添加并且轮播工作。
for reference, we were using jquery-3.3.1.slim.min.js and bootstrap/4.3.1/js/bootstrap.min.js on this site.
作为参考，我们在此站点上使用了 jquery-3.3.1.slim.min.js 和 bootstrap/4.3.1/js/bootstrap.min.js。
I do not know why an image would or could cause a carousel to malfunction, but it did. I couldn't find a reference to this cause elsewhere either, so I'm posting here for posterity in the hope that it might help someone else when other solutions fail.
我不知道为什么图像会或可能导致轮播出现故障，但确实如此。我也找不到其他地方对此原因的引用，所以我在这里发布以供后代使用，希望在其他解决方案失败时它可以帮助其他人。
Test carousel with limited set of "known-to-be-good" images.
使用有限的“已知良好”图像集测试轮播。
回答by Paulepops
For me, the carousel wasn't working in the DreamWeaver CC provided the code in the "template" page I am playing with. I needed to add the data-ride="carousel" attribute to the carousel div in order for it to start working. Thanks to Adarsh for his code snippet which highlighted the missing attribute.
对我来说，轮播在 DreamWeaver CC 中不起作用，提供了我正在使用的“模板”页面中的代码。我需要将 data-ride="carousel" 属性添加到 carousel div 以使其开始工作。感谢 Adarsh 的代码片段，它突出显示了缺失的属性。
