我正在尝试实施Bootstrap 3轮播,并且遇到了一些问题。选择下一个时,不会发生转换。我在这里尝试了解这个主题的所有答案,但没有取得成功。任何帮助,将不胜感激。这是我目前的代码:
<head>
...
<link rel="stylesheet" href="js/jquery-1.12.3.js">
<link rel="stylesheet" href="js/bootstrap.min.js">
</head>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/slide-1-splash.png" alt="splash" class = "img-responsive">
</div>
<div class="item">
<img src="images/slide-2-interests.png" alt="interests" class = "img-responsive">
</div>
<div class="item">
<img src="images/slide-3-people.png" alt="people" class = "img-responsive">
</div>
<div class="item">
<img src="images/slide-4-messages.png" alt="messages" class = "img-responsive">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
答案 0 :(得分:0)
您似乎忘了在项目中加入bootstrap.js
。由于轮播使用了一些javascript代码,您只需要实现该文件。
我刚刚将您的代码复制到fiddle并且还包含了bootstrap.js
文件,它开始有效。
我也注意到,你使用的错误包括你的javascript文件。除此之外,您还没有包含bootstrap.css
文件。尝试使用此功能(如果需要,可以通过自己的本地更改源代码):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>