Twitter Bootstrapのカルーセルをキーボードとスワイプで操作

Twitter Bootstrapはレスポンシブレイアウトに対応しています。ですので、PC用とモバイル用のサイトを兼用で作るのが非常に楽です。
ですが、その際に気をつけないといけないのがユーザビリティです。

当然PCとモバイルでは使われるアクションが異なる為、異なるユーザビリティの向上が必要になります。モバイルであればスワイプやタップ、PCではキーボードもしくはマウスが主体の操作になります。

２つのライブラリを使って、カルーセルのアクションを制御させてみました。
カルーセルの基本的な使い方は公式サイトを見てください。

キーボード・スワイプで使うライブラリは以下になります。

• jwerty
• touchSwipe

jwerty

キーボードショートカットが簡単に設定できるライブラリです。
基本的な使い方は以下の通りです。

jwerty.key('ctrl+shift+P', function () { [...] });

十字キーは「矢印」で変換すれば良いです。
カルーセルは単純な横移動なので、以下の様に左右の矢印キーに割り当てます。

jwerty.key('←', function () {
	$('.carousel').carousel('prev');
});
jwerty.key('→', function () {
	$('.carousel').carousel('next');

});

touchSwipe

スワイプも同じように左スワイプと右スワイプに割り当てます。

$('.carousel').carousel({
	interval: false,
})
.swipe({
	swipeLeft:function(event, direction, distance, duration, fingerCount) {
		$(this).carousel('next');
	},
	swipeRight:function(event, direction, distance, duration, fingerCount) {
		$(this).carousel('prev');
	}
});

簡単ですね。単純なスワイプだけでなく、二本指でのスワイプや移動距離なども取得する事ができます。

[追記]
スワイプでのページ送りが逆なのを修正。