2017年6月13日 星期二

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廣告輪播左右按鈕的影陰與滑入顯示控制鈕

[範例預覽]

|

[範例下載]



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/html/17740.html

沒有留言:

張貼留言