Bootstrap教學－去除Carousel廣告輪播左右按鈕的影陰與滑入顯示控制鈕

　　說真的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
當滑鼠移到廣告輪播上方時，左右的按鈕以及下方的小圓鈕，才會顯示當移開又會隱藏起來，如此一下來就不會干擾到輪播中的圖片。

---

[範例預覽] | [範例下載]