2016-04-20 4 views
0

Моя карусель не работает хорошо карусель. Я не быть что проблемабутстрап карусель не делать слайдер

Мой код в GitHub является

https://github.com/Mangulomx/campeonato-frontend

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Файл index.html

div class="container"> 
      <br> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="/ribbit/img/1.jpg" alt="Chania" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="/ribbit/img/2.jpg" alt="Chania" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="/ribbit/img/3.jpg" alt="Flower" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="/ribbit/img/4.jpg" alt="Flower" width="460" height="345"> 
     </div> 
    </div> 

ответ

0

Вы пропустили левый и правый управления изображениями.

<!-- Left and right controls --> 
<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> 

Те, кто принадлежат к вашему тегу 'wrapper for slides div'.

Также вам нужно добавить ссылку на ссылку для загрузки css, чтобы упростить ее просто вставить в разделе «head» вашего html-документа.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

После этого вы должны быть добрым! Я получил большую часть информации от http://www.w3schools.com/bootstrap/bootstrap_carousel.asp, если вы хотите сослаться на это.

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