Не удается получить мою загрузочную карусель, работая - строка jQuery отключает остальную часть кода

Я боролся с этой карусели Bootstrap некоторое время. Я искал весь форум, но не мог заставить его работать. Вот код:Не удается получить мою загрузочную карусель, работая - строка jQuery отключает остальную часть кода

<!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:#">[email protected]</a></span></br> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Дело в том, не только карусель не работает, весь код после $('.carousel).carousel() отключен. Я подумал, может быть, это может быть проблема jQuery, но я не нашел никаких ошибок - файлы .js верны, их местоположение правильное. И если я прокомментирую эту строку jQuery, код снова работает.

Может кто-нибудь мне помочь, пожалуйста?

источник

2013-02-11 AFMeirelles

Почему вы заново изобретаете ссылки с элементом метки? – epascarello

Dunno, я думаю, это трюк noob. :) – AFMeirelles

необходимо JQuery быть включены перед тем Bootstrap ... изменить

<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" src="assets/js/jquery.js"></script> 
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>

источник

2013-02-11 17:00:27 ManseUK

Спасибо, ManseUK, прост и эффективен. – AFMeirelles

Вам необходимо загрузить JQuery, прежде чем загружать другие .js файлы.

источник

2013-02-11 17:00:29

Не удается получить мою загрузочную карусель, работая - строка jQuery отключает остальную часть кода

ответ

Смежные вопросы