我似乎无法让Bootstrap Carousel在本地工作，但可以在Codepen上工作
[英]I can't seem to get Bootstrap Carousel to work locally, but it works on codepen
问题描述
我正在尝试在我的网站上运行一个引导轮播，它显示为折叠状态，但它并没有转到下一张幻灯片，而是只是“跳了一下”。
这是我的标题，可能不正确：
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js" type="javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
这是我遇到麻烦的轮播的HTML：
<div class="carousel slide" id="spinner" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#spinner" data-slide-to="0"></li>
<li data-target="#spinner" data-slide-to="1"></li>
<li data-target="#spinner" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://placehold.it/600x300"></div>
<div class="item"><img src="http://placehold.it/600x300"></div>
<div class="item"><img src="http://placehold.it/600x300"></div>
</div>
<a class="left carousel-control" href="#spinner" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true">
</span><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#spinner" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true">
<span class="sr-only">Next</span></span></a>
</div>
值得注意的是，我已经在Codepen上运行了它，但是它不能在我正在编码的机器上运行。
我不关心转盘在Codepen上的外观，而只是功能。
3 个解决方案
解决方案1
1 2016-08-23 20:41:58
jQuery 3与bootstrap 3有一些兼容性问题。您的Codepen使用的是jquery 2.2.4。 将您的jQuery版本切换到2.2.4
解决方案2
0 2016-08-23 20:43:46
它适用于jQuery的早期版本，而不适用于3.x版本。
片段：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="carousel slide" id="spinner" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="#spinner" data-slide-to="0"></li> <li data-target="#spinner" data-slide-to="1"></li> <li data-target="#spinner" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"><img src="http://placehold.it/600x300"></div> <div class="item"><img src="http://placehold.it/600x300"></div> <div class="item"><img src="http://placehold.it/600x300"></div> </div> <a class="left carousel-control" href="#spinner" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"> </span><span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#spinner" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"> <span class="sr-only">Next</span></span></a> </div>
解决方案3
0 2016-08-23 20:44:19
在您的头部标签中使用此链接
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Bootstrap 3 Carousel在本地工作，但不会在服务器上滑动
[英]Bootstrap 3 Carousel works locally but won't slide on Server
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.