網頁開發 網頁設計

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

梅干 2017/06/13

梅問題-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
完成之後,原來畫面中的左右控制鈕,以及下方的小圓鈕,也會自動隱藏,但廣告依然是會自動輪播。
梅問題-Bootstrap教學-去除Carousel廣告輪播左右按鈕的影陰與滑入顯示控制鈕
Step3
當滑鼠移到廣告輪播上方時,左右的按鈕以及下方的小圓鈕,才會顯示當移開又會隱藏起來,如此一下來就不會干擾到輪播中的圖片。
梅問題-Bootstrap教學-去除Carousel廣告輪播左右按鈕的影陰與滑入顯示控制鈕
[範例預覽] | [範例下載]