スマホのレスポンシブにも対応したjQueryスライダー「glide.js」の使い方

      2015/11/17

スマホのレスポンシブにも対応したjQueryスライダー「glide.js」の使い方

スマホやタブレットのタッチデバイスにも対応した
レスポンシブjQueryスライダー「glide.js」がとてもよかったので
使い方とデモ・サンプルをご紹介します。

サンプルデモ・ダウンロードはこちら

スライダー系のJqueryプラグインは沢山ありますが、
「glide.js」の特長としては、以下の点が挙げられます。

・軽量で動作が軽い、読み込みが早い
・スマートフォンやタブレット等のタッチデバイスに対応している
・ブラウザの可変(レスポンシブ)にも対応できる

サンプルを見ていただければわかりますが、
ソースも比較的シンプルにすることができます。

オプションも必要最低限用意されているので、
左右の矢印や、中央のナビゲーションのデザインも容易です。

安定して使うことができるプラグインではないでしょうか。

HTML

 

CSS

 

オプション例

ナビゲーションの有無【navigation : true , false】
左右の矢印の有無【arrows : true , false】
右矢印のテキスト【arrowRightText : ‘右’】
左矢印のテキスト【arrowLeftText : ‘左’】
スライドが切り替わるタイミング【autoplay : 3000】
スライドのスピード【animationDuration : 1500】
マウスオーバーでスライドをストップ【hoverpause : true , false】

サンプルデモ・ダウンロードはこちら

配布サイト

http://jedrzejchalubek.com/glide/