slider slideshow glide

本ブログではこれまでも数多のjQueryスライダーを紹介してきました。
いずれも素晴らしい完成度で、すべて自信を持ってオススメできるものばかりですが、今回取り上げる［Glide.js］も他に負けず劣らず使い勝手がよく、実際、弊社でもクライアントワークで多用する機会が増えてきました。

さて。その［Glide.js］の導入方法ですが、まずは以下のサイトより、必要なファイルをダウンロードしてきましょう。

上記いずれかのサイトよりダウンロードしたzipファイルを展開すると、２つのスタイルシートと２つのスクリプトが同梱されているはずです。

  • glide.core.css
  • glide.theme.css
  • glide.js
  • glide.min.js

「glide.core.css」はベースとなるスタイルシート。
「glide.theme.css」はナヴィゲーションの矢印やボタンのデザインを司っています。
「glide.js」は本体となるスクリプト。
「glide.min.js」は「glide.js」を圧縮してファイルサイズを小さくしたものです。

これらのファイルをHTMLの適当な箇所で読み込みます。
「glide.min.js」か「glide.js」はどちらか片方でOK。
またこのとき、忘れずにjQueryの本体ファイルも使います。

<link rel="stylesheet" href="glide.core.css">
<link rel="stylesheet" href="glide.theme.css">
<script src="jquery.js"></script>
<script src="glide.min.js"></script>

肝心のスライドショーの部分ですが、デフォルトの設定のまま使用する場合、ちょっと特殊なクラス名でHTMLを記述していく必要があります。

<div id="Glide" class="glide">
<div class="glide__wrapper">
	<ul class="glide__track">
		<li class="glide__slide">1</li>
		<li class="glide__slide">2</li>
		<li class="glide__slide">3</li>
	</ul>
</div>
</div>

このように「glide」「glide__wrapper」「glide__track」「glide__slide」といったクラス名が使われています。
それぞれが重要な役割を持っているため、他のクラス名で置き換えたいときはオプションで設定します。

細かくカスタマイズしたいところですが、慣れないうちはデフォルトのままで、上記のコードをコピペして使うことをお勧めします。

設定の続きですが、ここでは「id=”Glide”」に対して［Glide.js］を効かせるので、以下のコードを追加で記述することになります。

<script>
$(function() {
var slider = $('#Glide').glide();
});
</script>

その他、細かいオプション設定は公式サイトの「Documentation」に詳しく掲載されています。

Documentation : http://glide.jedrzejchalubek.com/docs.html

最後に警告が１つ。
もし既に［Glide.js］をお使いの方は、使用しているバージョンを確認してみてください。
現時点で［Glide.js］の最新版は、バージョンが「2.0.3」となっています。
もし「1.x」系をお使いの場合は、ここで紹介した設定方法だとうまく動かないはずです。

これは「1.x」系と「2.x」系とで仕様がかなり異なるためで、双方は互換性が無いためです。

「1.x」系にはバグが存在するので「2.x」系にアップデートするべきですが、その際に設定をやり直すことになるので注意してください。

実装したサンプルは以下のリンク先からどうぞ。

［Glide.js］ : 実装サンプル