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(エルスカ)で確認できます。