スマホ対応のjQueryベースのイメージスライダー

jQuery Touch Swipe Slider イメージ
jQuery Touch Swipe Slider イメージ

現在KARA-FULLのトップで使っているスライダーはjQueryベースで拡張性の高いSliderKitというのを使っているんですが、スマートフォン対応を考えるとちょっと使いにくさを感じたのでスワイプ(フリック)などの動作に対応したTouchSwipeというタッチデバイスをベースにイメージスライダーを作成しました。

俗にいうjQueryプラグインってやつです。

このTouchSwipeの便利なところはタップやスワイプだけでなく2本指でのスワイプにも対応しているという点です(使ってませんが)。ただあくまでこのプラグインはタッチデバイス用のプラグインなのでスライダーなどの機能は自分で作る必要があります。

という訳で作ったのがコチラ。

Demo:jQuery Touch Swipe Slider – jQuery animation

当初CSS3によるアニメーションで作成してましたがtransformプロパティがIE8ですら対応していないためアニメーションどころか画像が切り替わりすらしなかったため、仕方なくjQueryアニメーションで作成しました。jQueryアニメーションだとスワイプ時のスライド動作がかなりぎこちないです。IEがせめてtranslateに対応してくれれば…。

ソースコードを見ると分かるかと思いますが、ページネーション(1,2,3,…)はスライド数に合わせて自動で作られるようになってます。デザインはstyle.cssの#pagination部分で変えることができます。

またMinify化してますがjquery.TSSlider.***.jsの冒頭にある以下の数値を変更することで設定を変えることができます。

currentImg:初期表示の画像(初期値:0)
speed:スライド速度(初期値300)
space:スワイプの遊び(初期値50)

スワイプの遊びというのはスライドさせるまでの必要距離です。(初期値では50px以上スワイプさせたら隣にスライドされます)

一応スライドアニメーションにCSS3を使ったものも用意しておいたので、「旧世代のブラウザなど知らん!これからはHTML5+CSS3の時代よ!!」って人はこちらをお使いください。

Demo:jQuery Touch Swipe Slider – CSS3 animation

jQuery、CSS3の両方をまとめたものは以下からダウンロードできます。

Download:TSSlider.zip

何か気付いた点がありましたらご連絡頂ければ幸いです。

今回のプラグイン作成にあたってCSS3の便利さを痛感しました。
早くCSS3がスタンダードになってくれないかなぁ…。

またスライダーのカスタマイズには以下のサイトを参考にさせて頂きました。
細かく説明されていて非常にわかりやすかったです。謝謝!!

jQuery でシンプルなループスライダーを作る   Unformed Building

jQuery本で気になる一冊

「スマホ対応のjQueryベースのイメージスライダー」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。