Bootstrap Carousel не работает

Question

Ни одна из кнопок карусели не реагирует и всякий раз, когда вы нажимаете, ничего не делает. Появляется первое изображение карусели, но я не могу перейти к другому. Вот скриншот

и вот HTML код http://pastebin.com/cmtkH9vA Пожалуйста, помогите мне получить над проблемой, как я хотел бы получить карусель сделано так быстро, как мог. Спасибо.

Answer 1

Когда я запускаю свой код, он выдает следующую ошибку в Firebug:

Error: Bootstrap's JavaScript requires jQuery 

Это потому, что Jquery не загружается должным образом в вашем коде.

Вы можете (быстро) исправить это, добавив http: // или https: // в URL-адрес jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

или

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Для использования Bootstrap пирушка ваш HTML должен выглядеть и помнить bootstrap.min.js использует JQuery, чтобы вы shold добавить ссылку на JQuery первый:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"></script> 
<div id="homeCarousel" class="carousel slide"> 
    <!-- Menu --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Items --> 
    <div class="carousel-inner"> 

     <!-- Item 1 --> 
    <div class="item active"> 
     <img src="http://lorempixel.com/1500/600/abstract/1"/> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Bootstrap 3 Carousel Layout</h1> 
      <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p> 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
     </p></div> 
     </div> 
    </div> 

     <!-- Item 2 --> 
    <div class="item"> 
     <img src="http://lorempixel.com/1500/600/abstract/2"/> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Changes to the Grid</h1> 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
     </div> 
    </div> 

     <!-- Item 3 --> 
    <div class="item"> 
     <img src="http://lorempixel.com/1500/600/abstract/3" /> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Percentage-based sizing</h1> 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 


<script> 
     $(function() { 
    $('#homeCarousel').carousel({ 
     interval:2000, 
     pause: "false" 
    }); 
    }); 
    </script> 

Вот fiddle