2016-04-20 134 views
0

我的旋轉木馬不能很好地傳送輪播。我不要這是問題bootstrap旋轉木馬不會使滑塊

我在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> 

這些屬於您的「幻燈片div的包裝」結束標記。

此外,您還需要添加引導鏈接的鏈接,使它更容易粘貼到您的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得到了大部分的信息,如果你也想提及的話。