第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内：
<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
…
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
…
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
通过两个 a 链接然后在内部定义要显示的小图标，一个是向前，一个是向后。
这两个图标都显示在图片容器的上面（z-index的值大于carousel-inner的）。
最终的效果如下：
上图展示的就是 Bootstrap 框架中 Carousel 插件实现的图片轮播的效果。只是上例展示的仅是设计效果，并不具备动画效果，接下来我们一起来看如何触发其播放效果。
我来试试：在上一小节的基础上完成本小节所讲解的第四步。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报