效果图如下:
<div class="carousel slide" id="carousel2">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel2" class="active"></li>
<li data-slide-to="1" data-target="#carousel2"></li>
<li data-slide-to="2" data-target="#carousel2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="img/p_big1.jpg">
<div class="carousel-caption">
<p>This is simple caption 1</p>
</div>
</div>
<div class="item ">
<img alt="image" class="img-responsive" src="img/p_big3.jpg">
<div class="carousel-caption">
<p>This is simple caption 2</p>
</div>
</div>
<div class="item">
<img alt="image" class="img-responsive" src="img/p_big2.jpg">
<div class="carousel-caption">
<p>This is simple caption 3</p>
</div>
</div>
</div>
<a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
备注:
如果把carousel-caption这个类修改为text-center,效果图变成下面:
备注:
carousel-control 控制左右箭头的显示与否
data-slide 控制轮播图的动作
carousel-inner 配合item 包含了很多轮播图
carousel-indicators 底部的一排圆圈
id 具体代表哪个轮播图
FR:海涛高软(QQ技术交流群:386476712)