使用bootstrap创建轮播

Question

我想使用bootstrap创建一个轮播，我使用网站上的确切代码，但它不会旋转幻灯片，幻灯片和div位置不正确。我应该对bootstrap代码应用哪些更改才能使其正常工作？

 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% */ 
}