Glide.jsというjQueryスライダーを使えばレスポンシブやタッチ操作に対応したスライダーを実装することができます。しかも軽量・シンプル・高速に動作するプラグインなのが嬉しいですね。今求められている必要な機能や特徴をしっかりと抑えてくれているプラグインといった感じですね。今後jQueryでスライダーを実装する時の選択候補の1つになりそうです。以下は使い方です。
[ads_center]
Glide.jsの使い方
実際のデモでは左右両サイドにある矢印や下部のナビゲーションからスライドさせて切り替えることができます。
Glide.js
特徴としては以下のようなものがあります。
- 軽量（min版では5KB以下）
- 高速に動作するCSS3のtransitionsを使用
- レスポンシブやタッチデバイスに対応
- スワイプ対応
- キーボード対応
これらの他にも充実したオプションやAPIなど色々あります。
使い方は、まずhead内にjQuery本体とGlide.js、そしてスタイルシートを読み込みます。
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jquery.glide.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css">
続いてHTMLでスライダーをマークアップしていきます。親要素のdivにはsliderというクラス名を付与します。スライダー自体はulリストで記述していきます。ulにはslides、liにはslideというクラス名を付けます。
<div class="slider">
<ul class="slides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
あとはセレクターに「.slider」を指定してプラグインをセットするだけです。
<script>
$('.slider').glide();
</script>
使い方自体はとてもシンプルで分かりやすいかと思います。
オプション
オプションを指定する場合は以下のようにします。
<script>
$('.slider').glide({
autoplay: 5000,
arrows: 'body',
nav: 'body'
});
</script>
オートプレイ（自動再生）やアニメーションタイム、または矢印やナビゲーションなど他にも色々と設定することができます。カスタマイズする際に活用していきたいですね。
