第四步：設(shè)計(jì)輪播圖片控制器。很多時候輪播圖片還具有一個向前播放和向后播放的控制器。在 Carousel 中通過 carousel-control 樣式配合 left 和 right 來實(shí)現(xiàn)。其中l(wèi)eft表示向前播放，right表示向后播放。其同樣放在carousel容器內(nèi)：
<div id="slidershow" class="carousel">
<!-- 設(shè)置圖片輪播的順序 -->
<ol class="carousel-indicators">
…
</ol>
<!-- 設(shè)置輪播圖片 -->
<div class="carousel-inner">
…
</div>
<!-- 設(shè)置輪播圖片控制器 -->
<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 鏈接然后在內(nèi)部定義要顯示的小圖標(biāo)，一個是向前，一個是向后。
這兩個圖標(biāo)都顯示在圖片容器的上面（z-index的值大于carousel-inner的）。
最終的效果如下：
上圖展示的就是 Bootstrap 框架中 Carousel 插件實(shí)現(xiàn)的圖片輪播的效果。只是上例展示的僅是設(shè)計(jì)效果，并不具備動畫效果，接下來我們一起來看如何觸發(fā)其播放效果。
我來試試：在上一小節(jié)的基礎(chǔ)上完成本小節(jié)所講解的第四步。
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報