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