ARマガジンのモバイルサイトをBootstrapでリニューアルして2週間。

carouselをスワイプ出来たら良いなぁと思い、ToucheSwipte.jsで実現する方法を見つめました。

紹介されているサイト（本家かなぁ？）が
http://labs.rampinteractive.co.uk/touchSwipe/demos/
です。

お目当てのToucheSwipte.jsのダウンロードは
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
から行いました。

ToucheSwipte.js　をインクルードして

$(document).ready(function(){
});

の中に書くのは

$(".carousel-inner").swipe( {
	swipeLeft:function(event, direction, distance, duration, fingerCount) {
		$(this).parent().carousel('next'); 
	},
	swipeRight:function(event, direction, distance, duration, fingerCount) {
		$(this).parent().carousel('prev'); 
	}
});

だけ、英語のサンプルではswipeLeftのアクションがcarousel('prev');になっていたけど、めくる感じより、引っ張る感じの方が良いと多数決でcarousel('next'); にしました。

実際の実装結果文壇ビストロ　ELSKA（エルスカ）で確認できます。