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事件可用手指滑動切換廣告
[範例預覽] | [範例下載]

相關文章

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版





回應本篇 »

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

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

共 3 梅留言

近期講座

2017 (二月講座)

更多講座