[JS]タッチデバイス対応、古いブラウザもカバーするシンプルで快適なスライダーの軽量スクリプト -Glide.js

シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。

Glide.js
Glide.js -GitHub

• Glide.jsのデモ
• Glide.jsの使い方

Glide.jsのデモ

デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。
スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。

デモページ

操作は左右のアローと中央下のナビゲーションでスライドでき、キーボードの矢印キーやタッチデバイスのスワイプでも操作できます。

デモページ

Glide.jsの使い方

Step 1: 外部ファイル

head内にjquery.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">

Step 2: HTML

スライダーのマークアップはシンプルです。
各アイテムをリストで配置し、divで内包します。

<div class="slider">
    <ul class="slides">
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
    </ul>
</div>

Step 3: JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

<script>
    $('.slider').glide();
</script>

オプション

オプションではオートプレイのタイミング、アローとナビゲーションの有無・配置・スタイルなどが設定できます。

<script>
    $('.slider').glide({
        autoplay: 5000,
        arrows: 'body',
        nav: 'body'
    });
</script>