網頁設計, 網頁資源

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

梅干2014/07/29
梅問題-網設必備-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事件可用手指滑動切換廣告
[範例預覽] | [範例下載]
UAG軍規iPhone防摔殼