一個輪播圖片主要包括三個部分：

  ? 輪播的圖片

  ? 輪播圖片的計數器

  ? 輪播圖片的控制器

復雜一點的輪播圖片，每個輪播區會帶有對應的標題和描述內容。那么在 Bootstrap 框架中，輪播圖是如何設計的呢？

第一步：設計輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個容器定義一個 ID 值，方便后面采用 data 屬性來聲明觸發。

<div id="slidershow" class="carousel"></div>

第二步：設計輪播圖片計數器。在容器 div.carousel 的內部添加輪播圖片計算器，采用 carousel-indicators 樣式，其主要功能是顯示當前圖片的播放順序(有幾張圖片就放置幾個li)，一般采用有順列表來制作：

<div id="slidershow" class="carousel">
<!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

在 Bootstrap 框架中，輪播圖片計數器，都是以圓點向大家呈現，其具體樣式如下：

/*bootstrap.css文件第5835行～第5863行*/
.carousel-indicators {
    position: absolute; /*整個計數區域絕對定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*設置其在Z軸的層級*/
    /*讓整個計數區水平居中*/
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}
/*設置當前狀態樣式*/
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}