轮播无法在Bootstrap，jQuery问题中使用？
[英]Carousel not working in Bootstrap, jQuery issue?
问题描述
New to Bootstrap, no clue with Java/jQuery. 
Bootstrap的新手，对Java / jQuery毫无头绪。 I found this cool snippet at: http://bootsnipp.com/snipps/carousel-extended but I'm screwing it up somehow. 我在以下网址找到了这个很酷的代码段： http : //bootsnipp.com/snipps/carousel-extended，但我以某种方式将其弄糟了。 Visually everything looks fine but the slides aren't moving and clicking on the thumbnails doesn't make a change either. 外观上看起来一切都很好，但是幻灯片没有动，单击缩略图也没有任何改变。 I went through the html and nothing is jumping out at me, which makes me think maybe it's the javascript? 我遍历了html，但什么也没跳出来，这让我觉得可能是javascript吗？ Does anyone see something I'm missing? 有人看到我想念的东西吗？ It's probably a dumb mistake. 这可能是一个愚蠢的错误。 Thanks! 谢谢！
<body>
<div id="wrapper">
<div class="container">
<!--logo-->
<header>
<div class="row">
<div class="span4 logo">
<a href="index.html"><img src="img/marlin-logo.png"></a>
</div>
<div class="span3 socialbox pull-right">
<div class="social-icons">
<a id="facebook" href="#"><img src="img/social_icons/facebook.png"></a>
<a href="#"><img src="img/social_icons/twitter.png"></a>
<a href="#"><img src="img/social_icons/flickr.png"></a>
<a href="#"><img src="img/social_icons/pinterest.png"></a>
<a href="#"><img src="img/social_icons/instragram.png"></a>
<a href="#"><img src="img/social_icons/mail.png"></a>
</div><!--end social-icons -->
</div><!--end span3 -->
</div><!--end row -->
</header>
<!--Nav-->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Home</a></li>
<li class="divider-vertical"></li>
<li class="active"><a href="about.html">About</a></li>
<li class="divider-vertical"></li>
<li><a href="contact.html">Contact</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Components<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 class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<!--end Nav-->
</div>
<!--end container-->
<div class="container">
<!-- Slider -->
<div class="row-fluid">
<div class="span12" id="slider">
<!-- Top part of the slider -->
<div class="row-fluid">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><img src="http://placehold.it/770x300&text=one" /></div>
<div class="item" data-slide-number="1"><img src="http://placehold.it/770x300&text=two" /></div>
<div class="item" data-slide-number="2"><img src="http://placehold.it/770x300&text=three" /></div>
<div class="item" data-slide-number="3"><img src="http://placehold.it/770x300&text=four" /></div>
<div class="item" data-slide-number="4"><img src="http://placehold.it/770x300&text=five" /></div>
<div class="item" data-slide-number="5"><img src="http://placehold.it/770x300&text=six" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="span4" id="carousel-text"></div>
<div style="display: none;" id="slide-content">
<div id="slide-content-0">
<h2>Slider One</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-5">
<h2>Slider Six</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div> <!--/Slider-->
<div class="row-fluid hidden-phone" id="slider-thumbs">
<div class="span12">
<!-- Bottom switcher of slider -->
<ul class="thumbnails">
<li class="span2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!--end container-->
<div id="footer">
<p>© 2013 Blue Marlin Template designed by <a href="http://www.jannahill.com" target="_blank">Janna Hill</a> | All Rights Reserved. </p>
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->
<!-- start: Java Script -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/flexslider.js"></script>
<script src="js/carousel.js"></script>
<!-- end: Java Script -->
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>
2 个解决方案
解决方案1
0 2013-04-29 11:00:42
解决方案2
0 已采纳 2013-04-29 21:36:54
Your HTML works fine, so most likely the references to the needed JavaScript-files are not correct. 您的HTML可以正常工作，因此最有可能对所需JavaScript文件的引用不正确。 I created a jsFiddle at http://jsfiddle.net/markusm/Tf6S7/1/ that works. 我在http://jsfiddle.net/markusm/Tf6S7/1/上创建了一个jsFiddle。 What I did was simply to use your code and add references to the needed Twitter Bootstrap CSS and JavaScript Files. 我所做的只是使用您的代码并添加对所需的Twitter Bootstrap CSS和JavaScript文件的引用。 What you have to do with your HTML-code is: 您对HTML代码所做的事情是：
Add 加
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
to the <head> -section (if you did not already have that reference anyway). 到<head> -section（如果您还没有该引用）。
And instead of the JavaScript references you use so far (the block between <!-- start: Java Script --> and <!-- end: Java Script --> ) add the following: 并且到目前为止，还没有使用JavaScript引用（ <!-- start: Java Script -->和<!-- end: Java Script --> ）添加了以下内容：
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
This will make sure you reference the correct JavaScript. 这将确保您引用正确的JavaScript。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.