来自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" 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>
我的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示例中的错误完全相同.
这是网站在我看来的样子：
解决方法
这里只有两件小事.
第一个是以下转盘指标列表项：
<li data-target="carousel" data-slide-to="0"></li>
您需要将data-target属性传递给选择器,这意味着ID必须以#为前缀.所以把它们改成如下：
<li data-target="#carousel" data-slide-to="0"></li>
其次,您需要给旋转木马一个起点,以便轮播指示物品和轮播内部物品必须有一个活动类.喜欢这个：
<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="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<!-- Other Items -->
</div>
