Twitter Элементы управления карусели Bootstrap не работают

Кажется, что все в порядке, но управление каруселями не работает. Когда я нажимаю на круг, ничего не меняется.Twitter Элементы управления карусели Bootstrap не работают

<hmtl> 
<style> 
    .ali{ 
     width:170px; 
     text-align:center; 
    } 
</style> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<body> 
    <div class="container" id="main"> 
     <div class="navbar navbar-inverse"> 
      <ul class="nav navbar-nav"> 
       <li class="ali"><a href="#">Page 1</a></li> 
       <li class="ali"><a href="#">Page 2</a></li> 
       <li class="ali"><a href="#">Page 3</a></li> 
       <li class="ali"><a href="#">Page 4</a></li> 
       <li class="ali"><a href="#">Page 5</a></li> 
       <li class="ali"><a href="#">Page 6</a></li> 
      </ul> 
     </div> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <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> 
       <li data-target="#MyCarousel" data-slide-to="3"></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="http://newartcolorz.com/images/lens-wallpaper/kartandtinki1_lens-wallpaper_03.jpg"> 
       </div> 

       <div class="item"> 
        <img src="http://images.tutorvista.com/cms/images/95/concave-lens.png" alt="Lens"> 
       </div> 
      </div> 
      <!-- start of carousel controls that are not working --> 
      <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> <!-- end of carousel inner --> 
    </div> <!-- end of carousel --> 
    <footer> 
    </footer> 
</body>

Я оторвалась от начальной загрузки страницы документации и управления карусельного идентичны.

источник

2015-05-10 BsD

Вы ошибку на карусели, вы забыли букву H на Glyphicon

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

как тот

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<meta name="description" content=""> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<script> 
 
$(document).ready(function(){ 
 
$('#mycarousel').carousel(); 
 
});</script> 
 
    <style> 
 
    .ali{ 
 
     width:170px; 
 
     text-align:center; 
 
    } 
 
</style> 
 
    <div class="container" id="main"> 
 
     <div class="navbar navbar-inverse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="ali"><a href="#">Page 1</a></li> 
 
       <li class="ali"><a href="#">Page 2</a></li> 
 
       <li class="ali"><a href="#">Page 3</a></li> 
 
       <li class="ali"><a href="#">Page 4</a></li> 
 
       <li class="ali"><a href="#">Page 5</a></li> 
 
       <li class="ali"><a href="#">Page 6</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
      <ol class="carousel-indicators"> 
 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
 
      </ol> 
 
      <div class="carousel-inner" role="listbox"> 
 
       <div class="item active"> 
 
        <img src="http://placekitten.com/300/500"> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img src="http://placekitten.com/300/500" alt="Lens"> 
 
       </div> 
 
      </div> 
 
      <!-- start of carousel controls that are not working --> 
 
      <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
       <span class="sr-only">Next</span> 
 
      </a> 
 
     </div> <!-- end of carousel inner --> 
 
    </div> <!-- end of carousel --> 
 
    <footer> 
 
    </footer> 
 
</body> 
 
    </html>

источник

2015-05-10 12:31:33 Xam1311

Все еще не работает – BsD

Вы пытаетесь вставить jquery перед загрузкой.min.js? закройте hml и поместите в раздел головы. – Xam1311

О, это была проблема, я забыл, что bootstrap требует jQuery – BsD

Twitter Элементы управления карусели Bootstrap не работают

ответ

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