2015-12-31 61 views
0

我使用bootstrap 3,並且我的旋轉木馬出現問題。 它不會自動滑動。但是,如果我點擊右側或左側它的作品和自動滑動工作。Bootstrap旋轉木馬不加載

我的代碼:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;"> 
         <!-- Indicators --> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         </ol> 

         <!-- Wrapper for slides --> 
         <div class="carousel-inner" role="listbox"> 
         <div class="item active"> 
          <img src="assets/img/img1.jpg" alt="..."> 
          <div class="carousel-caption">  
          </div> 
         </div> 
         <div class="item"> 
          <img src="assets/img/img2.jpg" alt="..."> 
          <div class="carousel-caption"> 
          </div> 
         </div> 
         </div> 

         <!-- Controls --> 
         <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
         <span class="sr-only">Next</span> 
         </a> 
        </div> 

謝謝您的幫助:)

+0

你在項目中包含bootstrap.js? – Cyval

回答

0

Acutually這個工程汽車,你只需要等到第一張幻燈片會搬出去。如果你要管理你可以使用jQuery在所提供的示例中的間隔(即從你的代碼開始):

var $ = jQuery.noConflict(); 
 
    $(document).ready(function() { 
 
     $('#carousel-example-generic').carousel({ interval: 5000, cycle: true }); 
 
    });
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
      <img src="assets/img/img1.jpg" alt="..."> 
 
      <div class="carousel-caption"> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="assets/img/img2.jpg" alt="..."> 
 
      <div class="carousel-caption"> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

0

你需要並初始化使用JavaScript的轉盤。

添加到您的代碼:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('carousel-example-generic').carousel({ 
     interval: 2000 
}) 

}); 
</script>