0

レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー

レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー

スマートフォンやタブレット端末のスワイプにも対応し、かつレスポンシブなスライドショーが実現できるjQueryプラグイン「Glide.js」をご紹介します。横幅100%のイメージスライドショーを手軽に実装できるので使いやすいです。

 glide-img

デモサンプル1

デモサンプル2

【使い方】

まずは、GitHubよりGride.js一式をダウンロードします。

 

1.jQueryとGlide.js、style.cssを読み込む

<header>内に「jQuery本体」と、「glide.js」、「style.css」を読み込みます。

オプション設定が可能ですが、デフォルト設定での利用の場合は、下記の3行のみでOKです。

 

2.JavaScriptを記述

 

3-1.HTMLを記述(サンプル1)

▼サンプル1
900×400pxの画像を3枚スライドさせてみます。

 デモサンプル1

 

 

 ウィンドウサイズ930以下の場合のCSSを記述します。(※スライドする対象のサイズによってこおこの指定を調整する必要があります。)

 

3-2.HTMLを記述(サンプル2)

▼サンプル2
テキストをスライドで表示させてみます。

 デモサンプル2

 

 ウィンドウサイズ930以下の場合のCSSを記述します。(※スライドする対象のサイズによってこおこの指定を調整する必要があります。)

4.オプションの設定

オートプレイやナビゲーションの有無などを設定することができます。指定する場所は.glide()の中に「,」で区切って記述します。サンプルでは以下のようなオプション設定になっています。

▼サンプルにおけるJavaScript設定

 

 オプション設定の中身

autoplay 自動動作
hoverpause マウスオーバーで停止
animationDuration スライドにかかる時間
navigation ポイントナビを表示/非表示
arrow next/prevボタンを表示/非表示
keyboard キーボード操作に対応可否

 

画像イメージをスライドさせる場合と、テキストのみをスライドさせる場合で要素の範囲が違ってきてしまうので、それぞれの場合でCSSを微調整して使う必要がありますのでご注意ください。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー