jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。

特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。

画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。

タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。

サンプルを作ってみました。

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル

オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。

【設置方法】
こちらからファイルをダウンロードします。

Download: https://github.com/jedrzejchalubek/Glide.js

<head>部分に以下のようにファイルを指定します。

<body>にスライダーを以下のようにマークアップします。

あとは</body>直前に以下のように記述するだけです。

簡単ですね!

矢印やナビなど、スタイルを好きなように変更してデザインすると使えるスライダーが完成するのではないでしょうか。

ウェブサイト: http://jedrzejchalubek.com/glide/

この記事と関連してると思われる記事: