Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕

梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
  Bootstrap內建了許多實用互動特效,由其是它的廣告輪播系統,相當的方便且好用套用,同時也提供許多自訂的選項,像是輪播廣告的文字、連結、預設起始廣告....等,這些完全不用寫任何的Javascript,只需由html的標籤就可進行控制,雖然說相當的方便,但卻有個美中不足的地方,就是每當廣告輪播的尺寸若不是1170px二旁就會出現露白現象,以及廣告輪播只有一則時,畫面則會出現播放的控制鈕,因此梅干就來分享一下,如何讓廣告輪播依圖片的素材自動調整,以及單則廣告時隱藏控制鈕。

Bootstrap Carousel廣告輪播尺寸自動調整:
Step1
首先,先在container後加入coverflow,與加入下方的javascript。
$(function(){
   $('.coverflow').css('max-width',$('.coverflow img').width());
});
梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Step2
完成後,就會看到,原先右邊的露白立即就被修正。
梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
#修正後
梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Bootstrap Carousel廣告輪播單則隱藏控制鈕:
Step1
將下方的javascript加入。
if ($('.coverflow .carousel-inner div.item').length < 2 ) { 
	$('.carousel-indicators, .carousel-control').hide();
} 
梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Step2
加入後,所有的控制鈕就會被隱藏起來,當二則以上就會自動再出現,這樣是不是超方便的呀!
梅問題-Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

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

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