Bootstrap教學《Bootstrap廣告輪播加入Touth》用手指頭左右滑動切換廣告

梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
  現在在製作RWD自適網頁,有不少朋友也從原生的CSS3轉戰到Bootstrap,除了可縮短網頁的開發時間外,Bootstrap內建還有不少的互動特效,即時是視覺人員也能輕易上手,而Bootstrap中有個Coverflow的廣告輪播特效,也是目前網站中最常被使用到的,且整個使用過程中,完全不用寫任何的程式碼,只要把相對應的html標籤安插到要顯示的區塊中就好了,相當的簡單好用,也省去程式開發的時間。
  但這麼好用的功能,當螢幕解析變成手機模式時,大部分的朋友,都會將它設為隱藏,之所以會這樣子,主要是因為當在手機模式下,並沒有辦法用手指滑動的方式來切換輪播,只能點輪播上的左右鍵,或下方的小鈕來切換,這對於在手機的控操下,是個相當不符人機界面的,但使用者載入了這麼久,卻只能讓它隱藏起來,是否也感到相當的可惜,因此現在只要加入touth事件,就能讓bootstrap原來的coverflow廣告輪播,支援手指滑動來切換廣告啦!如此一來才能更符合手機上的操控,至於怎麼做,現在就一塊來看看吧!
Step1
首先,進到http://swipejs.com/這個網站,下載swipe.js檔。
梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
Step2
再將它儲存到所需的目錄下。
梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
Step3
接著開啟網頁,在</body>上方將剛下載的swipe.js引用進來,並在下方加入控制的語法。
<script src="js/swipe.js"></script>
<script>
$(function() {
var $myCarousel = $(".carousel-inner").swiperight(function()
{
$myCarousel.carousel('prev');
}).swipeleft(function() {
$myCarousel.carousel('next');
});
});
</script>
梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
Step4
由於加入了滑動事件後,就不用再左右滑動鈕,與下方的點點的鈕,因此這時就可將這些鈕給隱藏起來。
梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
Step5
拿出手機來測試看看,這時就可透過手指滑動來切換廣告啦!
梅問題-網設必備-Boostrap廣告輪播加入Touth事件可用手指滑動切換廣告
[範例預覽] | [範例下載]

相關文章

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

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

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

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

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

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

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮





回應本篇 »

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

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

共 3 梅留言