Bootstrap教學-Carousel廣告輪播滾動切換變成淡入淡出效果

梅問題-Bootstrap教學-Carousel廣告輪播切換變成淡入淡出效果
  先前已經不斷的一直強化Bootstrap內建的廣告輪播系統,除了支援全螢幕外,甚至還會自動產生控制小鈕,以及單則廣告時隱藏所有的控制鈕,讓Bootstrap內建的廣告輪播更加的方便好用,但那天在RWD的分享會中,突然有位同學問到,能否將廣告切換時的左右滾動,變成淡入淡出的效果。
  這也讓梅干當場楞了一下,梅干還真的從未想過這問題,去調整Bootstrap廣告切換的過場效果,於是梅干上網爬了一下文,發現已有熱心的網友分享了相關的作法,而梅干也將原來的控制碼稍作調整,立即就能讓Bootstrap內建的廣告輪播切換由滾動變成淡入淡出的效果啦!有需要的朋友現在也一塊來看看囉!
Step1
首先將下方的CSS碼,加到網頁中。
.carousel-fade .carousel-inner .item {
	transition-property: opacity;
}
.carousel-fade .carousel-inner .item,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
   opacity: 0;
}
.carousel-fade .carousel-inner .active,  
.carousel-fade .carousel-inner .next.left,  
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;	
}
.carousel-fade .carousel-inner .next,  
.carousel-fade .carousel-inner .prev,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

Step2
接著再把class="carousel slide"的中再加入carousel-fade
梅問題-Bootstrap教學-Carousel廣告輪播切換變成淡入淡出效果
Step3
都完成之後,無論是自動還是手動切換廣告時,都會以淡入淡出的效果呈現,是不是超EZ的呀!
梅問題-Bootstrap教學-Carousel廣告輪播切換變成淡入淡出效果
[範例預覽] [範例下載]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座