第四步：設計輪播圖片控制器。很多時候輪播圖片還具有一個向前播放和向后播放的控制器。在 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 可將課程添加到書簽
舉報