みなさん、お疲れ様です。
今回の制作物は、カルーセルです。
早速デモをご覧ください。フリックでも画像切り替えできるので、スマホでも見てみてください。
コードです。HTMLで画像の数を変更したら、他は自動的に対応してくれるようになっています。
HTML
CSS（抜粋）
jQuery
画像をdivの中で横並びにし、そのdivをposition:absoluteにしてleftの値を変えることでスライドさせています。
○今回使ったjQueryのいろいろ
・touchstart・・・タッチしたときのイベントを取得する。
・touchmove・・・タッチしてから数ミリ秒後のイベントを取得する。
・touchend・・・指を話した瞬間のイベントを取得する。
今回、初めてタッチイベントを実装したのですが、なかなかうまくいきませんでした。はじめは画像を切り替える関数をtouchmoveイベントに入れてたのですが、touchmoveイベントは押さえている間ずっと有効になってしまうので、画像の切り替えがうまくいきませんでした。touchendイベントに入れるとフリックで切り替えができるようになりました。
変数宣言もイベントの外でしてあげないと動きませんでした。
まだまだ不明点が多いので、勉強しつつ他の動きも実装したいと思います。
それでは。
参考にさせていただいたサイト
jQueryで作るフリックスライド – （１）無段階スライド
jQueryを使ったスライダーの作り方とその仕組み