Bootstrap Carousel 内部“自动播放”
Posted
技术标签:
【中文标题】Bootstrap Carousel 内部“自动播放”【英文标题】：Bootstrap Carousel-inner "autoplay" 【发布时间】：2015-02-19 12:47:50 【问题描述】：有人可以帮我吗？我知道这里有一些问题。为什么我必须在页眉末尾和页面底部链接 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>
【问题讨论】：
【参考方案1】：我刚刚设置了一个Fiddle，其中包含您的示例的轮播、jQuery 版本 2.1.3、bootstrap.js 和 bootstrap.css 作为外部资源以及用于初始化轮播的脚本
$('#myCarousel').carousel(
interval: 3000,
cycle: true
);
它正在工作 - 它在页面加载并且控制器也在工作时启动。 它对您不起作用可能是在 jQuery 之前加载引导程序的问题 - 必须在引导程序之前包含 jQuery。要检查是否是这种情况，请查看是否有任何错误/控制台消息，例如“错误：Bootstrap 的 JavaScript 需要 jQuery”。您还包括 2 个不同的 jQuery 版本 - 1.11.1 和 2.1.3。如果没有必要，例如对于一些依赖较旧 jQuery 版本的插件，请尝试仅加载最新版本。 此外，您在结束正文和 html 标记之间放置了脚本标记，这可以工作，但无效 - 有关详细信息，请参阅 link, script tags between </body> and </html>。 作为使用不同 jQuery 版本的参考，以防万一，您可以查看http://api.jquery.com/jquery.noconflict/
【讨论】：
【参考方案2】：您可以通过带有data-interval 标签的HTML 来实现。
将其插入<div id="myCarousel" class="carousel slide">，如下所示：
<div id="myCarousel" class="carousel slide" data-interval="3000">
3000 的值可以调整为较大的数字以降低速度，较小的数字可提高速度。
【讨论】：
这不会自动启动轮播。它只是在每张幻灯片之间设置interval。如果没有javascript，似乎没有办法做到这一点。
虽然这不能回答问题 - 感谢您的回答，因为我不知道。很高兴每天都能学到新东西。【参考方案3】：
在包含轮播的 div 中添加自定义属性 data-ride="carousel"。
您可以选择添加data-interval="5000" 以更改滑块更改持续时间（以毫秒为单位）。
【讨论】：
以上是关于Bootstrap Carousel 内部“自动播放”的主要内容，如果未能解决你的问题，请参考以下文章