AFMeirelles AFMeirelles - 6 months ago 10
HTML Question

Can't get my bootstrap carousel working - jQuery line disables the rest of the code

I've been struggling with this Bootstrap carousel for a while. I've searched the whole forum, but couldn't get it working. Here's the code:

<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Sindicato de Hot&eacute;is, Bares, Restaurantes e Similares do Litoral Norte do RS</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javaScript">
<!--
$(document).ready(function(){
$("#about").hide();
$("#drop").click(function(){
$("#about").toggle(200);
});
$('.carousel slide').carousel('cycle');
//Conteúdos
$("#body").load("home.html");
$("#home").click(function(){
$("#body").load("home.html");
});
$("#historia").click(function(){
$("#body").load("historia.html");
});
$("#diretoria").click(function(){
$("#body").load("diretoria.html");
});
$("#base").click(function(){
$("#body").load("base.html");
});
$("#associe").click(function(){
$("#body").load("associe.html");
});
$("#documentos").click(function(){
$("#body").load("documentos.html");
});
$("#contato").click(function(){
$("#body").load("contato.html");
});
});
//-->
</script>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div id="header" class="span12">
<div class="span2"><img src="img/logo_small.png" /></div>
<div class="span10">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="img/carrousel1.jpg" alt="" />
<div class="carousel-caption">
<p>Torres: A Mais Bela Praia Ga&uacute;cha</p>
</div>
</div>
<div class="item">
<img src="img/carrousel2.jpg" alt="" />
<div class="carousel-caption">
<p>Mostardas: uma carrada de passarinhos</p>
</div>
</div>
<div class="item">
<img src="img/carrousel3.jpg" alt="" />
<div class="carousel-caption">
<p>Tr&ecirc;s Cachoeiras: t&atilde;o sem gra&ccedil; que a &uacute;nica atracao eh uma arvore</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
<div id="main" class="row-fluid">
<div class="span12"><img src="img/header_orange.png" /></div>
</div>
</div>
<div id="main" class="row-fluid">
<div id="menu" class="span2">
<div id="header_menu"><img src="img/top_menu.png" alt=""></div>
<div id="options_menu">
<ul class="unstyled">
<li><label id="home">Home</label></li>
<li><img src="img/line.png"></li>
<li><label id="drop">Sindicato</label></li>
<img src="img/line.png">
<div id="about">
<ul class="unstyled">
<li><label id="historia">Hist&oacute;ria</label></li>
<img src="img/line.png">
<li><label id="diretoria">Diretoria</label></li>
<img src="img/line.png">
</ul>
</div>
<li><label id="base">Base territorial</label></li>
<li><img src="img/line.png"></li>
<li><label id="associe">Associe-se</label></li>
<li><img src="img/line.png"></li>
<li><label id="documentos">Documentos</label></li>
<li><img src="img/line.png"></li>
<li><label id="contato">Contato</label></li>
</ul>
</div>
<div id="bottom_menu"><img src="img/top_menu.png" alt=""></div>
</div>
<div id="body" class="span10"></div>
</div>
<div id="footer">
<strong>Sindicato de Hot&eacute;is, Bares, Restaurantes e Similares do Litoral Norte - RS</strong></br>
<span>Rua Fernandes Bastos, 100 - sala 16 :: Tramanda&iacute;/RS :: CEP: 95590-000 ::
Fone: (51) 8116.9669 :: E-mail: <a href="mailto:#">contato@sindlitoralnorters.com.br</a></span></br>
</div>
</div>
</div>
</body>
</html>


The thing is, not only the carousel doesn't work, all the code after
$('.carousel).carousel()
is disabled. I thought maybe it could be a jQuery problem, but I didn't find any errors - the .js files are correct, their location is correct. And if I comment out that jQuery line, the code works again.

Can anybody help me, please?

Answer

jQuery needs to be included before Bootstrap... change

<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>

to

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
Comments