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