Bootsrap 3 carousel not working

Question

это мой код для моей карусели бутстрапа, моя предыдущая и следующая кнопка не работают. Кажется, я не понимаю, в чем проблема.

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div id="img-slider" class="caroussel slide" data-ride="carousel"> 

     <!-- dots --> 

     <!-- wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 

      <div class="item active"> 
       <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/> 
      </div> 

      <div class="carousel-caption"> 
       <h1>University of Surrey Breakdancing society</h1> 
      </div> 

      <div class="item"> 
       <img src="img/MNB-2.jpg"/> 
      </div> 

      <div class="item"> 
       <img src="img/MNB-3.jpg"/> 
      </div> 

      <div class="item"> 
       <img src="img/MNB-4.jpg"/> 
      </div> 

      <div class="item"> 
       <img src="img/MNB-5.jpg"/> 
      </div> 
     </div> 

     <!-- next and previous buttons --> 
     <a class="left carousel-control" href="#img-slider" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 

     <a class="right carousel-control" href="#img-slider" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 

    </div> 
</div> 

Я разбил свой сайт на различные страницы php, которые связывают друг с другом через require или include. возможно, это может быть фактором для рассмотрения, но я потратил время на то, чтобы выяснить, что происходит, но я просто не могу наложить на него свой палец ...

Answer 1

Вы орфографическая ошибка: карусели, не Caroussel

<div id="img-slider" class="caroussel slide" data-ride="carousel"> 

должен быть

<div id="img-slider" class="carousel slide" data-ride="carousel"> 

Рабочий пример:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12"> 
 
    <div id="img-slider" class="carousel slide" data-ride="carousel"> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/2500x500/f00" alt="..."> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/2500x500/000" alt="..."> 
 
     </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#img-slider" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 

 
    <a class="right carousel-control" href="#img-slider" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 

 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

Ваш синтаксис неверен. Субтитры входят внутрь предметов.

т.е. изменить это:

<div class="item active"> 
    <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/> 
</div> 

<div class="carousel-caption"> 
    <h1>University of Surrey Breakdancing society</h1> 
</div> 

Для этого:

<div class="item active"> 
    <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/> 
    <div class="carousel-caption"> 
    <h1>University of Surrey Breakdancing society</h1> 
    </div> 
</div>