BootstrapのCarouselをスワイプでも操作できるようにする

個人的には、カスタマイズしやすいので、Bootstrapのcarouselは良く使う。

スマホはスワイプしたいという要望も多いので。

$(function(){
        $('.carousel').carousel();
        $('.carousel').on('touchstart', touchStart);
        $('.carousel').on('touchmove' , touchMove);

        function touchStart(e) {
            var pos = position(e);
            carousel.attr('data-touchpos',pos.x);
        }
        function touchMove(e) {
            var pos = position(e);
            if( pos.x < $('.carousel').attr('data-touchpos') ){
                $('.carousel').carousel('next');
            }else{
                $('.carousel').carousel('prev');
            }
        }
        function position(e){
            var x = e.originalEvent.touches[0].pageX;
            var y = e.originalEvent.touches[0].pageY;
            x = Math.floor(x);
            y = Math.floor(y);
            var pos = {'x':x , 'y':y};
            return pos;
        }
    });

もっといい方法もありそうな気がする。