carousel{
width: 500px;
}
html如下:
<!-- 轮播图 -->
<!-- slide 切换的过渡 -->
<!-- data-ride="carousel" 实现轮播效果 -->
<!-- data-interval="2000" 时间2s -->
<div class="carousel slide" id="carousel" data-ride="carousel" data-interval="2000">
<!-- 圆圈 -->
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<!-- data-slide-to="0" 第一个小点 -->
<li class="active" data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- 图片 -->
<div class="carousel-inner" id="pian">
<div class="item active">
<img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
</div>
<div class="item">
<img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
</div>
<div class="item">
<img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
</div>
</div>
<!-- 左右按钮 -->
<a href="#carousel" class="left carousel-control" data-slide="prev">
<!-- glyphicon-chevron-left 左箭头 -->
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- glyphicon-chevron-right you箭头 -->
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>