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

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

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

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

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

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

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

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

HTML

<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>

<body>

<h1>スマホやタブレットのレスポンシブに対応したjQueryスライダー「glide.js」デモ</h1>

<p>画像はブラウザの可変に対応。タッチデバイスでのスライドも可能です。</p>

</ul>

</div>

$('.slider').glide({

arrowRightText: '',

arrowLeftText: '',

animationDuration: 1500,

autoplay: 4000,

hoverpause: false

});

</script>

</body>

CSS

* { 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; }

* { 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】

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

Pocket