Javascript Bootstrap Carousel 内部“自动播放”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27585424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel-inner "autoplay"
提问by xXDarksnakeXx
Can some one help me out? There are a few things wrong here I know. Why do i have to link bootstrap.min.js at the end of the header and at the bottom of the page. Ive tried using one at a time but it doesnt work. The next thing is that I want carousel to start when I load the page and when I click the controllers; not just when i click the controllers.
有人可以帮我吗？我知道这里有一些错误。为什么我必须在标题的末尾和页面的底部链接 bootstrap.min.js。我试过一次使用一个，但它不起作用。接下来是我希望在加载页面和单击控制器时启动轮播；不仅仅是当我单击控制器时。
<head>
<title>The James Baldwin School</title>
<link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="container">
<div id="navtop" class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">The James Baldwin School</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /container -->
</div><!-- /navbar wrapper -->
<!--- Javascript Bootstrap --->
<script src="Framework/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel</h1>
<p>Pictures slide with overlapping words</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Each Slide can be different</h1>
<p>I just need some one to pick the pictures and words</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on smart-phones</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div id="about">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details ?</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details ?</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details ?</a></p>
</div>
</div><!-- /.row -->
</div>
<!-- START THE FEATURETTES -->
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>This site was created by Isaac Perez. · <a href="http://www.google.com">Check it out</a></p>
</footer>
</div><!-- /.container -->
</body>
<script src="Framework/js/bootstrap.min.js"></script>
<script src="Framework/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function() { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
// ]]></script>
</html>
回答by matthias_h
I've just set up a Fiddlecontaining the carousel of your example, jQuery version 2.1.3, bootstrap.js and bootstrap.css as external resources and your script to initalize the carousel
我刚刚设置了一个Fiddle，其中包含您示例的轮播、jQuery 版本 2.1.3、bootstrap.js 和 bootstrap.css 作为外部资源和您的脚本来初始化轮播
$('#myCarousel').carousel({
interval: 3000,
cycle: true
});
and it's working - it starts when the page loads and the controllers are working, too.
That it's not working for you can be an issue of loading bootstrap before jQuery - jQuery has to be included before bootstrap. To check if this is the case, see if there are any error / console message like "Error: Bootstrap's JavaScript requires jQuery". Also you're including 2 different jQuery versions - 1.11.1 and 2.1.3. If not necessary, e.g. for some plugins relying on an older jQuery version, try just to load the latest one.
In addition, you're placing script tags between the closing body and html tags which can work, but isn't valid - see link, script tags between </body> and </html>for details.
As reference for using different jQuery versions in case this would really be necessary, you can check http://api.jquery.com/jquery.noconflict/
它正在工作 - 它在页面加载并且控制器也在工作时启动。它对您不起作用可能是在 jQuery 之前加载引导程序的问题 - 必须在引导程序之前包含 jQuery。要检查是否是这种情况，请查看是否有任何错误/控制台消息，例如“错误：Bootstrap 的 JavaScript 需要 jQuery”。此外，您还包括 2 个不同的 jQuery 版本 - 1.11.1 和 2.1.3。如果没有必要，例如对于某些依赖于较旧 jQuery 版本的插件，请尝试加载最新版本。
此外，您在结束正文和 html 标签之间放置了脚本标签，它们可以工作，但无效 -有关详细信息，请参阅链接，</body> 和 </html> 之间的脚本标签。
作为使用不同 jQuery 版本的参考，以防万一真的有必要，您可以查看http://api.jquery.com/jquery.noconflict/
回答by tonyynot
You could do it through the HTML with the data-intervaltag.
Insert it into <div id="myCarousel" class="carousel slide">so it looks like this:
你可以通过带有data-interval标签的 HTML 来完成。插入它<div id="myCarousel" class="carousel slide">，看起来像这样：
<div id="myCarousel" class="carousel slide" data-interval="3000">
The value of 3000can be adjusted to a higher number to decrease speed and a lower number to increase speed.
3000可以将的值调整为较大的数字以降低速度，将 的值调整为较小的数字以提高速度。
回答by Sagar Patel
Add custom attribute data-ride="carousel"in the containing carousel div.
You can optionally add data-interval="5000"to change the slider change duration in milliseconds.
data-ride="carousel"在包含 carousel div 中添加自定义属性。您可以选择添加data-interval="5000"以更改滑块更改持续时间（以毫秒为单位）。
