jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
【設置方法】
こちらからファイルをダウンロードします。
Download: https://github.com/jedrzejchalubek/Glide.js
＜head＞部分に以下のようにファイルを指定します。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.glide.js"></script> |
＜body＞にスライダーを以下のようにマークアップします。
|
1 2 3 4 5 6 7 |
<div class="slider"> <ul class="slides"> <li class="slide">コンテンツ１</li> <li class="slide">コンテンツ２</li> <li class="slide">...必要な分繰り返す</li> </ul> </div> |
あとは＜/body＞直前に以下のように記述するだけです。
|
1 2 3 |
<script> $('.slider').glide(); </script> |
簡単ですね！
矢印やナビなど、スタイルを好きなように変更してデザインすると使えるスライダーが完成するのではないでしょうか。
ウェブサイト: http://jedrzejchalubek.com/glide/
あわせてお読みください
Responsly.js jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。 このjQueryプラグインを使用すると…
Slider Pro 「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像を…
jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…
コメントを残す