Bootstrap 3 Carousel不工作 [英] Bootstrap 3 Carousel Not Working
本文介绍了Bootstrap 3 Carousel不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的来自Bootstrap的轮播不会显示我的图片或对控件做出反应。
这是我的HTML：
<！DOCTYPE HTML>
< html>
< head>
< title> Skates R Us< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< link rel =stylesheethref =css / bootstrap.min.css>
< link rel =stylesheethref =css / global.css>
< / head>
< body>
< div class =navbar navbar-inverse navbar-fixed-toprole =navigation>
< div class =container>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =sr-only>切换导航< / 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>首页< / a>
< / li>
< li>
< a href =contact.html>联系人/关于< / a>
< / li>
< li>
< a href =shop.html>商店< / a>
< / li>
< li>
< a href =new.html>新产品< / a>
< / li>
< li>
< a href =media.html>媒体< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
< div id =carouselclass =carousel slidedata-ride =carousel>
< ol class =carousel-indicators>
< li dat-target =carouseldata-slide-to =0>< / li>
< li data-target =carouseldata-slide-to =1>< / li>
< li data-target =carouseldata-slide-to =2>< / li>
< / ol>
< div class =carousel-inner>
< div class =item>
< img src =img / slide_1.pngalt =幻灯片1>
< / div>
< div class =item>
< img src =img / slide_2.pngalt =Slide 2>
< / div>
< div class =item>
< img src =img / slide_3.pngalt =Slide 3>
< / div>
< / div>
< a href =＃carouselclass =left carousel-controldata-slide =prev>
< span class =glyphicon glyphicon-chevron-left>< / span>
< / a>
< a href =＃carouselclass =right carousel-controldata-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;
}
/ *由于定位图像，我们需要帮助标题* /
。carousel-caption {
z-index：10;
}
/ *声明高度，因为img元素的定位* /
.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控制台中没有错误，
这是网站在我的结尾：
解决方案
p>
第一个是在以下轮播指标列表项中：
< li data-target =carouseldata-slide-to =0>< / li>
您需要传递 data-target 属性 selector ，表示ID必须以＃为前缀。因此，将其更改为以下内容：
< li data-target = ＃轮播data-slide-to =0>< / li>
其次，您需要给旋转木马一个起点，以便轮播指示器项目和轮播内部项目必须有一个活动类。像这样：
< ol class =" carousel-indicators&
< li data-target ="＃carousel" data-slide-to =0 class =" active" >< / li>
<！ - 其他项目 - >
< / ol>
< div class =" carousel-inner">
< div class =" item active ">
< img src =" http：//lorempixel.com/1500/600/abstract/1" alt =幻灯片1 />
< / div>
<！ - 其他项目 - >
< / div>
工作演示在小提琴
My carousel from Bootstrap won't display my images or react to the controls.
This is my 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:
#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.
This is what the site looks like on my end:
解决方案
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-target attribute a selector which means the ID must be prefixed with #. So change them to the following:
<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 active class. Like this:
<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>
Working Demo in Fiddle
这篇关于Bootstrap 3 Carousel不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
