引导轮播无法正常工作 [英] Bootstrap Carousel Not working
问题描述
我正在尝试实现Twitter Bootstrap轮播，到目前为止，我一直没有成功.我有以下页面:
I'm trying to implement the Twitter Bootstrap carousel, and so far I've been unsuccessful. I have the following page:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Fluxware: Play, learn and build games</title>
<meta name="description" content="Home page for Fluxware">
<meta name="author" content="Tim Butram">
<!-- CSS Stylesheets -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--For shitty webbrowsers -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script>
<![endif]-->
<!-- Favicon -->
<link rel="favicon" href="images/favicon.ico">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Play</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Build</a></li>
</ul>
</div>
</div>
</div>
<!-- Grid -->
<div class="container">
<div class="row">
<div class="span12">
<div class="hero-unit">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item"><img src="/images/1.png" /></div>
<div class="item"><img src="./images/2.png" /></div>
<div class="item"><img src="./images/3.png" /></div>
</div>
<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="row">
<div class="span4">
<a class="btn btn-large">Play</a>
<p>Play games created with Fluxware.</p>
</div>
<div class="span4">
<a class="btn btn-large">Learn</a>
<p>Learn how to create games and game assets</p>
</div>
<div class="span4">
<a class="btn btn-large">Build</a>
<p>Use the Fluxware tools to create game.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/js/bootstrap-transition.js"></script>
</body>
</html>
除了轮播之外，所有内容似乎都能正确渲染.通过阅读Bootstrap页面，看来我需要坚持一个
And everything seems to render correctly, except for the carousel. From reading the Bootstrap page, it appears that I need to stick a
$('.myCarousel').carousel();
在某个地方，但是我不知道在哪里，如何或为什么.除此之外，在Firefox错误控制台中，我得到了两个错误
somewhere, but I have no clue as to where, how or why. In addition to that, in the Firefox error console, I get the two errors
$ is undefined
bootstrap-carousel.js [第125行]和
in bootstrap-carousel.js [line 125] and
$ is not a function
bootstrap-transition.js [第22行]
in bootstrap-transition.js [line 22]
推荐答案
很显然，jQuery没有正确加载.
尝试将两个脚本加载到页面< head> 中.
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.
运行轮播的代码是
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
您可以将其放在其他两个脚本之后的< head> 中
或其他脚本现在所在的位置.
You can put it either in the <head> after the two other scripts
or where the other scripts are now.
这篇关于引导轮播无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
