軽量!レスポンシブ!タッチ操作対応なシンプルスライダー「Glide.js」

「Glide.js」はとてもシンプルなスライダーを実装できるjQueryプラグインです。軽量でありながら、充分な機能をそろえています。

Glide.js

Glide

スライダーは数多くありますが、この「Glide.js」は軽量でシンプルながら、今どきの機能をしっかりおさえているところが素晴らしいです。まず4.5kbという軽量さ。タッチデバイス向けにレスポンシブと、タッチ操作にも対応しています。CSS3のtransitionでスライダー機能を実現しているようですが、古いブラウザもサポートしているようです。(範囲は未確認)各種APIもシンプルでわかりやすい。

 

このようなスライダーを実装することができます。左右のやじるし箇所は”次へ”、”前へ”ボタンです。下段のやじるし箇所はページネーションとなります。

Glide-demo-1

 

それでは「Glide.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link rel="stylesheet" href="css/style.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.glide.js"></script>

 

HTMLはこのようにマークアップします。

<div class="slider">
  <ul class="slides">
    <li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>
    <li class="slide"><div class="box" style="background-color: #16a085;"></div></li>
    <li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>
    <li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>
    <li class="slide"><div class="box" style="background-color: #d35400;"></div></li>
    <li class="slide"><div class="box" style="background-color: #c0392b;"></div></li>	
  </ul>
</div>

 

CSSはこのように指定します。

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.box {
  width: 100%; 
  height: 100%;
}

 

JavaScriptはこのように実装します。

var glide = $('.slider').glide().data('api_glide');

 

するとこのように作ることができました。

Glide-sample-1

とても簡単です。やはり今はどんなWebサイトもタッチデバイスに対応させることが大前提な気がします。スライダーを使うことがあればこのプラグインを選択しよう。参考にどうぞ。

 

Home > JavaScript > 軽量!レスポンシブ!タッチ操作対応なシンプルスライダー「Glide.js」

Return to page top