說真的Boostrap內建的Carousel廣告輪播系統，有夠簡單與方便套用的，除了完全不用寫到任何的javascript外，甚至只需透過HTML，就可以自行的增減輪播的數量，以及設定連結與說明文案，因此再也不擔心衝突的問題，同時只要加入CSS3的動畫語法，就能將預設的左右滾動，變成淡出淡入的效果，這對於許多網頁設計師是再簡單不過的了。
今天梅干要來分享，兩個Bootstrap廣告輪播的小技巧，一個是將左右二旁的按鈕陰影給去除，以及當滑鼠游標，移到廣告區塊中，才顯示控制鈕，而這些功能，也完全不用寫到javascript，只需透過CSS設定就可完成，因此想知道怎麼作的朋友，現在也一塊來看看囉！
Step1
方法很簡單，只需在CSS中，加入下方的語法。
[css]
/去除左右按鈕的陰影/
.carousel-control{
background-image:none !important;
filter:none !important;
}
/滑入顯示控制鈕/
.carousel .carousel-control,
.carousel-indicators {
opacity: 0;
/* Firefox /
-moz-transition-property: opacity;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
/ WebKit /
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.2s;
-webkit-transition-delay: 0.2s;
/ Opera */
-o-transition-property: opacity;
-o-transition-duration: 0.2s;
-o-transition-delay: 0.2s;
transition-property: opacity;
transition-duration: 0.2s;
transition-delay: 0.2s;
}
.carousel:hover .carousel-control,
.carousel:hover .carousel-indicators{
opacity: 1.0;
}
[/css]
Step2
完成之後，原來畫面中的左右控制鈕，以及下方的小圓鈕，也會自動隱藏，但廣告依然是會自動輪播。
Step3
當滑鼠移到廣告輪播上方時，左右的按鈕以及下方的小圓鈕，才會顯示當移開又會隱藏起來，如此一下來就不會干擾到輪播中的圖片。
[範例預覽] | [範例下載]