Im not sure what Im doing wrong but the carousel is not rotating images or
changing images when I click next/prev
Please look at my code and tell me what I am missing.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script language="JavaScript" type="text/javascript"
src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-transition.js"></script>
<title>Common Collective</title>
</head>
<style type="text/css">
body {
}
</style>
<body><div class="container">
<div class="span6 offset3">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">Music</a></li>
<li><a href="#">Pics</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span6 offset3">
<div class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
for ($i=0; $i < count($files) ; $i++) {
if ($i==0) {
$active= " active";
}else{
$active='';
}
?>
<div class="item<?php echo $active; ?>" >
<img src="img/photos/<?php echo $files[$i]; ?>" alt="Common Collective
TRUTH" />
<div class="carousel-caption">
Common Collective
</div>
</div>
<?php
}
?>
</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>
<script type="text/javascript">
$(document).ready(function() {
// set up the Carousel with no additional options
$('#Carousel').carousel();
});
</script>
</div>
</div>
</body>
</html>
Thanks.
