我有一个无法正常工作的 Bootstrap Carousel，我已经搜索了其他 Bootstrap carousel 线程，但似乎找不到答案。通常这里大多数问题的答案是 jQuery 库没有正确链接，或者根本没有链接，我认为是我的链接。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class ="navbar navbar-default" role = "navigation">
<div class= "container">
<div class = "navbar-header">
<a class = "navbar-brand" href="#featured"> <span class="subhead">Wisdom Pet Medicine</span></a>
</div>
<ul class = "nav navbar-nav navbar-right">
<li><a href="#featured">Home</a></li>
<li><a href="#mission">Mission</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#staff">Staff</a></li>
<li><a href="#testimonials">Testimonials</a></li>
</ul>
</div>
</nav> <!--main nav-->
<div class= "carousel slide" data-ride= "carousel" id = "featured">
<div class="carousel-inner">
<div class="item active"><img src= "img/carousel-lifestyle.jpg" alt="lifestyle"></img></div>
<div class="item"><img src= "img/carousel-exoticanimals.jpg" alt="animals"></img></div>
<div class="item"><img src= "img/carousel-fish.jpg" alt="fish"></img></div>
<div class="item"><img src= "img/carousel-mission.jpg" alt="mission"></img></div>
<div class="item"><img src= "img/carousel-stateoftheart.jpg" alt="motto"></img></div>
<div class="item"><img src= "img/carousel-vaccinations.jpg" alt="vaccine"></img></div>
</div> <!-- Wrapper for slides -->
<a class ="left carousel-control" href= "#featured" role = "button" data-slide ="prev"><span class= "glyphicon glyphicon-chevron-left"></span></a>
<a class ="right carousel-control" href= "#featured" role = "button" data-slide ="next"><span class= "glyphicon glyphicon-chevron-right"></span></a>
</div>
</div><!-- carousel-->
</div>
</header>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
我也有一些 CSS，它可能不相关，但无论如何我都会包含它:
body {
font-size: 1.5em;
font-weight:200;
}
.navbar {
border-radius: none;
}
.navbar-nav {
padding-right: 20px;
}
.navbar-header>a {
font-size:1.2em;
font-weight:150;
color: black !important;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
transition: all 0.5s ease 0s;
color: green !important;
}
.carousel {
position:relative;
top:-20px;
}
最佳答案
您需要使用不同版本的 jQuery(您使用的是 v1.8.3)，最低版本为 v1.9.1。
如果使用 CDN，我建议检查其中之一。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
或
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
或
关于html - 我的 Bootstrap Carousel 没有前进，也没有自动运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33319553/