BS3 Carousels

簡介

Carousel 的中文意思是「旋轉木馬」，是的！就是遊樂園裡那種排成圓形轉圈圈的木馬。BS3 裡的主容器類別 .carousel 是用來建立相片或圖片的輪播介面元件，一般是三、五張圖片循環播放，幾張圖片轉著圈圈，輪流出現，行為模式還真有點像旋轉木馬。.carousel 元件和 .jumbotron 元件一樣，主要的作用都在吸引使用者的目光；所佔網頁的篇幅都很大，只是前者是動態的，而後者是靜態的。.carousel 元件大多用在展示主力產品或介紹企業願景。個人覺得 BS3 的 .carousel 元件的外觀設計得滿簡單的，如果要美觀點，得修改不少樣式表裡的設定。

整個 .carousel 元件又分成幾大區塊：

.carousel

包含所有子元件的容器。要特別注意的是，這個容器還得宣告 id 值供函式控制使用。另有一個 .slide 的 CSS 類別，在樣式表中並沒有定義，在 bootstrap.js 的 javascript 程式中會偵測是否有宣告，若有宣告，則轉換圖片時會有動畫效果，若沒宣告，則轉換圖片時無動畫效果。

.carousel-inner

這是圖片的展示區，佔據 .carousel 元件的全寬，其它各元件則用 z-index 設定「浮在」.carousel 元件的上方。.carousel-inner 元件內含 .item 元件，.item 則含有 <img> 標記，可選擇性再含有 .carousel-caption 的元件。展示用的圖片最好具有相同的大小，特別是高度。如果圖片的高度不同，整個 .carousel 元件會隨著圖片變更而調整高度，看起來不是很好看，否則就要為 .carousel-inner 設定固定的 height 屬性值，超過高度的圖片部份會被裁掉。另外，圖片的色調也最好相近，否則 .carousel-indicators 和 .carousel-caption 元件的顏色會很難調配，這些元件在和其色調相近的圖片上很不容易看得清楚。

.carousel-caption

圖片的標題或註解說明。

.carousel-control .left

左邊控制區，佔 15% 的寬度，內含 .previous 控制鈕，用以退回到上一張圖片。

.carousel-control .right

右邊控制區，佔 15% 的寬度，內含 .next 控制鈕，用以前進到下一張圖片。

.carousel-indicators

圖片指標，表示目前圖片在圖片序列中的位置。

以下是 BS3 v3.3.6 之 bootstrap.css 樣式表中.carousel 相關的各樣式定義：

.carousel {
    position: relative;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
         -o-transition: .6s ease-in-out left;
            transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
      -webkit-transition: -webkit-transform .6s ease-in-out;
           -o-transition:      -o-transform .6s ease-in-out;
              transition:         transform .6s ease-in-out;

      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-perspective: 1000px;
              perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(100%, 0, 0);
              transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
    display: block;
}
.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    left: 0;
}
.carousel-inner > .active.left {
    left: -100%;
}
.carousel-inner > .active.right {
    left: 100%;
}
.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, 0);
    filter: alpha(opacity=50);
    opacity: .5;
}
.carousel-control.left {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
    background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}
.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
    background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}
.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
    text-decoration: none;
    filter: alpha(opacity=90);
    outline: 0;
    opacity: .9;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
    left: 50%;
    margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
    right: 50%;
    margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
    width: 20px;
    height: 20px;
    font-family: serif;
    line-height: 1;
}
.carousel-control .icon-prev:before {
    content: '\2039';
}
.carousel-control .icon-next:before {
    content: '\203a';
}
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    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;
}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption .btn {
    text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -10px;
      font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
      margin-left: -10px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
      margin-right: -10px;
  }
  .carousel-caption {
      right: 20%;
      left: 20%;
      padding-bottom: 30px;
  }
  .carousel-indicators {
      bottom: 20px;
  }
}

範例

範例中展示了一個有三張圖片的 carousel 元件，圖片的原始大小為 1920 x 1200。為了展示如何修改樣式表以改變 carousel 的外觀，用的並非 carousel 的預設外觀。

圖 1. 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width:1000px;
    padding:20px;
}
.carousel-inner {
    background-color: white;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    margin: 0 auto;
}
.carousel-caption {
    color: white;
}
.carousel-indicators li {
    background-color:lightgreen;
    border: 1px solid lightgreen;
}
.carousel-indicators .active {
    background-color:coral;
    border: 1px solid coral;
}
.carousel-control {
    background-color: none;
}
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    color: white;
}
</style>

CSS 中 .carousel-inner 的底色設定，只有在圖片尺寸不能佔滿全寬時才會顯現，否則都會被圖片的顏色蓋住。.carousel 預設圖片會靠右排列，.carousel-inner > .item > img{} 中的設定會將圖片置中。其它的諸樣式設定，都只是在改變元件的顏色，不難理解，就不多做解釋了。

HTML

<body>
    
    
  
        
        

            
            

                
Slide 1
                  
            
            
            

                
Slide 2
                
            
            
            

                
slide 3
                
            
  
        
        
        
            
            Previous
        
        
        
            
            Next
        
        
        

            

            

            

        
 
    
</body>

第 3 行主容器類別為 .carousel 的標記一定要設定 id 屬性，屬性值會用來連結其它元件。設定 .slide 類別，讓圖片在轉換時具有動畫的效果，.slide 類別在樣式表中找不到，是 bootstrap.js 裡用到的旗標。data-ride="carousel" 自訂屬性，讓 carousel 元件在顯示後，自動輪播放圖片。若沒有設定，則不會自動輪播，必須手動點按控制鈕或圖片指標才能變更圖片。data-interval=3000設定每隔 3000ms（3秒）換播圖片。
第 7 行的 .active 設定該 .item 為 active 的項目，所有的 .item 中一定要有一個，而且只能有一個設定為 .active，否則 carousel 就不會正常運作。此處設定 .active 的項目位置必須和 .carousel-indicators 中設定 .active 的位置一致。
第 23, 28 行的 href 屬性值必須設定為 carousel 的 id 值；自定屬性 data-slide 的值設定圖片移動的方向，只接受 prev 及 next 二個值。
第 34~36 行中的 data-target 自定屬性值必須是 .carousel 的 id 值，data-slide-to 的值則是該指標被點按時，應該要出現之圖片的順序號碼，由 0 開始起算。