スマホのレスポンシブにも対応したjQueryスライダー「glide.js」の使い方
スマホやタブレットのタッチデバイスにも対応した
レスポンシブjQueryスライダー「glide.js」がとてもよかったので
使い方とデモ・サンプルをご紹介します。
サンプルデモ・ダウンロードはこちら
スライダー系のJqueryプラグインは沢山ありますが、
「glide.js」の特長としては、以下の点が挙げられます。
・軽量で動作が軽い、読み込みが早い
・スマートフォンやタブレット等のタッチデバイスに対応している
・ブラウザの可変（レスポンシブ）にも対応できる
サンプルを見ていただければわかりますが、
ソースも比較的シンプルにすることができます。
オプションも必要最低限用意されているので、
左右の矢印や、中央のナビゲーションのデザインも容易です。
安定して使うことができるプラグインではないでしょうか。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <h1>スマホやタブレットのレスポンシブに対応したjQueryスライダー「glide.js」デモ</h1> <p>画像はブラウザの可変に対応。タッチデバイスでのスライドも可能です。</p> <div class="slider"> <ul class="slides"> <li class="slide"><img src="img/sample01.jpg" alt=""></li> <li class="slide"><img src="img/sample02.jpg" alt=""></li> <li class="slide"><img src="img/sample03.jpg" alt=""></li> <li class="slide"><img src="img/sample04.jpg" alt=""></li> <li class="slide"><img src="img/sample05.jpg" alt=""></li> </ul> </div> <script> $('.slider').glide({ arrowRightText: '', arrowLeftText: '', animationDuration: 1500, autoplay: 4000, hoverpause: false }); </script> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
* { margin: 0; padding: 0; border: 0; list-style: none; } .slider { position: relative; width: 100%; height: 450px; overflow: hidden; } .slides { height: 100%; overflow: hidden; *zoom: 1; } .slide { height: 100%; float: left; clear: none; } .slide img { width: 100%; } .slider-arrow { position: absolute; display: block; margin-bottom: -20px; padding: 20px; } .slider-arrow--right { bottom: 50%; right: 30px; background: url(img/right.png) no-repeat; } .slider-arrow--left { bottom: 50%; left: 30px; background: url(img/left.png) no-repeat; } .slider-nav { position: absolute; bottom: 30px; } .slider-nav__item { width: 12px; height: 12px; float: left; clear: none; display: block; margin: 0 5px; border: 1px solid #fff; border-radius: 8px; } .slider-nav__item:hover { background: #fff; } .slider-nav__item--current { background: #fff; } |
オプション例
ナビゲーションの有無【navigation : true , false】
左右の矢印の有無【arrows : true , false】
右矢印のテキスト【arrowRightText : ‘右’】
左矢印のテキスト【arrowLeftText : ‘左’】
スライドが切り替わるタイミング【autoplay : 3000】
スライドのスピード【animationDuration : 1500】
マウスオーバーでスライドをストップ【hoverpause : true , false】
サンプルデモ・ダウンロードはこちら
Follow me!
