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

    スマホ対応の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本で気になる一冊

    COMMENTS : 0

    Comment Form

    TRACKBACKS : 2

    Trackback URL
    http://www.kara-full.com/hibi/web/110606_touchswipeslider.html/trackback
    pingback from ケソケソドットコム » Blog Archive » スマホのスライドショーの仕方 11-11-21 (月) 9:34

    [...] スマホ対応のjQueryベースのイメージスライダー |ヒビヅレ [...]

    pingback from スマートフォンに。マルチデバイス対応のjQueryイメージスライダー | 台湾を軸に中国・アジアへの海外WEB進出支援!株式会社メディアウェイブ 11-12-11 (日) 15:09

    [...] http://www.kara-full.com/hibi/etc/110606_touchswipeslider.html [...]

    RECOMMEND
    • Apple Magic Trackpad

      マルチタッチによる多機能なトラックパッド。マウスとまるでUIが違うため慣れが必要だけど、慣れると超便利!関連記事はコチラ

    • シグマ 30mm F1.4 EX DC

      f1.4なので室内でも明るく撮れ、かなりピンポイントで焦点が合うレンズ。ボケ味がいい感じなので温かみのある写真が撮れます。初めに購入したレンズ。関連記事はコチラ

    • I-O DATA 縦・横置き両対応USB接続外付HD 2.0TB

      安くて静かで大容量の外付けHD。縦横どちらでも置けるのが何気に嬉しい!関連記事はコチラ

    • Web制作の現場で使うjQueryデザイン入門[改訂新版]

      jQuery1.9にも対応したjQuery本の入門書。入門書とはいえlightbox風ギャラリーやバリデーションチェックの作り方も載ってて中級者までカバー。

    • おいしいご当地スーパーマーケット 47都道府県で出会ったひとめボレ食品さん

      スーパーマーケットマニアの森井ユカさんがついに日本のスーパーに!懐かしいのから新しいのまでデザイン性優れた食品パッケージが満載!ちなみに大分のコメント書かせて頂きました。関連記事はコチラ

    RSS
    Mail
    AFFILIATE-Google