網頁設計, 網頁資源

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

2017/06/14
梅問題-Bootstrap教學-去除Carousel廣告輪播左右按鈕的影陰與滑入顯示控制鈕
  說真的Boostrap內建的Carousel廣告輪播系統,有夠簡單與方便套用的,除了完全不用寫到任何的javascript外,甚至只需透過HTML,就可以自行的增減輪播的數量,以及設定連結與說明文案,因此再也不擔心衝突的問題,同時只要加入CSS3的動畫語法,就能將預設的左右滾動,變成淡出淡入的效果,這對於許多網頁設計師是再簡單不過的了。
  今天梅干要來分享,兩個Bootstrap廣告輪播的小技巧,一個是將左右二旁的按鈕陰影給去除,以及當滑鼠游標,移到廣告區塊中,才顯示控制鈕,而這些功能,也完全不用寫到javascript,只需透過CSS設定就可完成,因此想知道怎麼作的朋友,現在也一塊來看看囉!
Step1
方法很簡單,只需在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;
    }

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

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