slides(slides.jquery.js)をスマートフォンでフリック操作（flickable）対応可能にしたい。
slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。
「slides」本体は下記にて入手可能です。
SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3
1)424行目あたりに、下記のように左右のフリック操作を感知させるイベントリスナーを追加します。
$(function() {
var box = $("#slides_cont")[0];
box.addEventListener("touchstart", touchHandler, false);
box.addEventListener("touchmove", touchHandler, false);
box.addEventListener("touchend", touchHandler, false);
});
function touchHandler(e) {
e.preventDefault();
var touch = e.touches[0];
if (e.type == "touchstart") {
startX = touch.pageX;
} else if (e.type == "touchmove") {
diffX =0;
diffX = touch.pageX - startX;
} else if (e.type == "touchend") {
if (diffX > 60) {
animate('prev', effect);
diffX = 0;
} else if (diffX < -60) {
animate('next', effect);
diffX = 0;
} else {
var href = $(".slides_control a.current").attr("href");
window.open(href,'_self');
diffX = 0;
}
}
}
2)182行目付近を下記のように変更し、現在表示されているスライドにcurrentというクラスを出すように変更します。
control.children(':eq('+ next +')').css({ left: position, display: 'block' }).addClass('current').siblings().removeClass('current');
サンプルはこちら
slides(slides.jquery.js)のフリッカブル化 - jsdo.it - Share JavaScript, HTML5 and CSS
