使用引導程序創建傳送帶

Question

我想使用引導程序創建傳送帶，我使用網站的確切代碼，但它不旋轉幻燈片，幻燈片和div的位置不正確。我應該將哪些更改應用於引導代碼以使其工作？

enter code here 
<div id="carousel-example-generic" class="carousel slide" data-  ride="carousel"> 
<!-- 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"> 
<div class="item active"> 
    <img src="..." alt="..."> 
    <div class="carousel-caption"> 
    ... 
    </div> 
</div> 
... 
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left"></span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
</a> 
`enter code here`</div> 

Answer 1

首先添加bootstrap css，jquery和bootstrap js。 然後添加HTML代碼後初始化傳送帶通過： -

$('.carousel').carousel(); 

http://jsfiddle.net/8LSz4/1/

Answer 2

，你必須......

你需要使用背景 - 通過<img>或通過<divs>包括你的圖片大小封面類。如下所示;

<div class="carousel-inner"> 
      <div class="active item"> 
       <div style="background:url(/images/1.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 

然後添加以下CSS：

.slider-size { 
    height: 300px; /* This is your slider height */ 

    } 
    .carousel { 
    width:100%; /* changes the width of the carousel on the page */ 
    margin:0 auto; /* center your carousel if other than 100% */ 
}