Bootstrap Carousel controls not working
Question
twitter bootstrap carousel not working. I tried changing the id ('#mycarousel') to .carousel or .mycarousel but nothing is working. when I click on the controls it does not advance. what is wrong with this piece of code?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></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>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
1 answers
solution1
3 ACCPTED 2013-07-10 17:18:09
The following code will never gets executed, since you never actually call it.
$('#mycarousel').carousel();
You should change the following:
function(){
$('#mycarousel').carousel();
}
to:
$(function(){
$('#mycarousel').carousel();
});
This will make it execute when the dom is ready.
You also do not close you link tag that loads the bootstrap css from being loaded.The following:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
Should be:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
You load the JS files in an order which I am not sure if it is correct. I suppose they should be in the reverse order.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.