本ブログではこれまでも数多の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 : https://glidejs.com
最後に警告が１つ。
もし既に［Glide.js］をお使いの方は、使用しているバージョンを確認してみてください。
現時点で［Glide.js］の最新版は、バージョンが「2.0.3」となっています。
もし「1.x」系をお使いの場合は、ここで紹介した設定方法だとうまく動かないはずです。
これは「1.x」系と「2.x」系とで仕様がかなり異なるためで、双方は互換性が無いためです。
「1.x」系にはバグが存在するので「2.x」系にアップデートするべきですが、その際に設定をやり直すことになるので注意してください。
実装したサンプルは以下のリンク先からどうぞ。
［Glide.js］ : 実装サンプル
ウェブサイトでお困りのときはオンズにお任せください！
