前言

bootstrap的carousel輪播圖只有兩側的邊可以進行點選並進行上一頁下一頁，但是這個輪播圖放在手機頁面H5裡就很需要手勢左右滑動。我查了下網上都是引一些別的類庫，並不是最好的方法。

程式碼

其實bootstrap有提供左右切換的方法，但是沒有監聽手勢滑動的事件，我們只需要實現監聽事件並進行處理就可以了。

三個事件

<div class="carousel-inner" ontouchstart='getFlag()' ontouchmove='setFlag()' ontouchend='change()'>
</div>
 

在carousel-inner的div上加了這三個事件，接著，用兩個變數來存滑動起點和滑動終點（因為為了實現左右滑動，所以只聲明瞭接收水平軸位置的兩個變數）

兩個變數

    var flagX = 0;
    var flagXM = 0;

接著，就是三個方法：

三個方法

    function getFlag(){
        flagX = event.touches[0].pageX;
        flagXM = flagX;
    }

    function setFlag(){
        flagXM = event.touches[0].pageX;
    }

    function change(){
        var range = flagXM - flagX;
        //如果水平滑動距離小於30，就不切換
        if(Math.abs(range) < 30){
            return false;
        }     
        var direction = range < 0 ?'next':'prev';
        $("#carousel-example-generic").carousel(direction);
    }