我的引导轮播可以正确呈现，但是它不会自动滑动，当我单击其中一个箭头时，它会稍微向下滚动页面，否则无任何作用。我已仔细检查以确保将一项设置为活动状态，并且列表项具有正确的数据目标。
我的形象也很好，所以无论如何都不是。
这是我的代码：https : //jsfiddle.net/5vh42ufs/4/
<div id="mainPics" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mainPics" data-slide-to="0" class="active"></li>
<li data-target="#mainPics" data-slide-to="1"></li>
<li data-target="#mainPics" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/ball.png" alt="Chania">
</div>
<div class="item">
<img src="img/ball.png" alt="Chicago">
</div>
<div class="item">
<img src="img/ball.png" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#mainPics" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mainPics" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
导入jQuery后，需要导入Bootstrap JavaScript CDN。对于Bootstrap 3.4.0，您可以添加以下内容：<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>。
仅导入jQuery仅使您可以访问jQuery库，该库本身不执行任何操作。Bootstrap仍然有自己的JavaScript文件，其中包含动画的所有代码。由于Bootstrap使用的是jQuery而非香草JS，因此请确保在导入jQuery之后导入CDN ，否则它将无法正常工作。
nav {
width: 70%;
margin: auto;
margin-top: 50px;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: darkred;
}
.navbar-inverse .navbar-brand:hover {
color: darkred;
}
body {
background: url(../img/back.jpg);
background-color: black;
background-position: center;
background-size: 100% 100%;
min-height: 1000px;
}
#content {
background: url(../img/logo.png) no-repeat;
background-size: 600px 600px;
background-position: center;
background-color: #222;
border-style: solid;
border-width: 1px;
border-radius: 3px;
border-color: #080808;
width: 70%;
margin: auto;
margin-top: 15px;
margin-bottom: 50px;
opacity: 0.95;
min-height: 1000px;
}
p {
color: white;
width: 90%;
margin: auto;
font-size: 1.5em;
margin-top: 15px;
}
h1 {
color: white;
text-align: center;
padding-top: 15px;
margin-bottom: 0px;
}
footer {
right: 0;
bottom: 0;
left: 0;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
color: white;
}
#mainPics {
margin: auto;
margin-top: 15px;
width: 70%;
min-height: 500px;
}
#item {
margin: auto;
width: 80%;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
}<!DOCTYPE html>
<html>
<head>
<title>HMICSL - Home</title>
<link rel="shortcut icon" href="img/ball.png" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/universal.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="mx-auto navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="deviceTypeNav">Home Page</a>
</div>
<ul class="nav navbar-nav">
<li><a href="teams.html">Teams</a></li>
</ul>
</div>
</nav>
<div id="content">
<h1>Welcome to HMICSL</h1>
<div id="mainPics" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mainPics" data-slide-to="0" class="active"></li>
<li data-target="#mainPics" data-slide-to="1"></li>
<li data-target="#mainPics" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="Chania">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg" alt="Chicago">
</div>
<div class="item">
<img src="http://learnphotoediting.org/wp-content/uploads/tree-picture-live-oak-trees-for-sale-fast-growing-trees.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#mainPics" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mainPics" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句