レスポンシブ対応のシンプルなJavaScriptスライダー Glide.js の使い方

Glide.js

今回はCSS3を使って作られた、レスポンシブに対応したシンプルなスライダーをご紹介します。こちらスマートフォンなどのタッチデバイスにも対応しているプラグインです。オプションの数も結構揃っていていろいろ使いやすいのではないでしょうか。

用意するもの

GitHubからプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。jQueryとプラグイン本体、一式の中に入っているcssも読み込む必要があります。もちろん、cssは中身だけ自分で使用するcssにコピーして使っても構いません。

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

基本的な使い方

スライダーにしたい部分を下記のようにマークアップします。liの中には画像でもテキストでも好きなものを入れて大丈夫です。

<div class="slider">
  <ul class="slider__wrapper">
    <li class="slider__item"></li>
    <li class="slider__item"></li>
    <li class="slider__item"></li>
  </ul>
</div>

必要なファイルを読み込んでマークアップを済ませたら下記のようにglideを発火させます。
こちらは一番シンプルな形ですね。

$('.slider').glide();

他にオプションをつける際はこのようになります。オプション各種は公式のGitHubに全部書いてあるので確認してみてください。自動再生やナビゲーションの有無はもちろん、hover時にはスライダーを止めるなど豊富なオプションがあります。

$('.slider').glide({
  autoplay: 5000,
  arrows: 'body',
  navigation: 'body'
});

CSS3に基づいているので古いブラウザでは動かなさそうですが、最近では基本的なCSS3が動かないほど古いブラウザは気にしなくても良くなってきた気がしますね。

WebクリエイターのためのCreateJSスタイルブック ~JavaScript+HTML5で作るアニメーション/インタラクティブコンテンツ~ (Web Designing Books)