我正在尝试使用 Bootstrap Carousel 将幻灯片添加到我的网页，但似乎照片没有滑动，只显示第一张图片。而且底部和两侧的按钮不太好用。有人愿意查看我的代码并帮助我解决这个问题吗？
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/reverse1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/12976329_224255987939469_1210159874_n.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/13098983_106200126454398_1338693822_n.jpg" width="450" height="450">
</div>
<div class="item">
<img src="images/13166635_879641332146032_791969762_n.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" 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="jquery-1.12.3.js"></script>
<script>
$('#myCarousel').carousel();
</script>最佳答案
您错过了 bootstrap.min.js
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$('#myCarousel').carousel();
</script>关于javascript - Bootstrap轮播不滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37053566/