slides(slides.jquery.js)をスマートフォンでフリック操作（flickable）対応可能にしたい。

slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。

「slides」本体は下記にて入手可能です。

SlidesJS, a simple slideshow plugin for jQuery.

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

参考ページ

[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu