Menu
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>
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();
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
in bootstrap-carousel.js [line 125] and
$ is not a function
in bootstrap-transition.js [line 22]
579
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.
The code to run the carousel is
<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>
You can put it either in the <head> after the two other scripts
or where the other scripts are now.
185
Had the same problem.
39
Recently had the same problem, it seems in the current version of Bootstrap, you must also include a class called slide.
<div id="myCarousel" class="carousel slide span12">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
