Glide.js

JavaScript

レスポンシブやタッチ操作に対応した軽量・シンプル・高速のjQueryスライダー「Glide.js」

Glide.jsというjQueryスライダーを使えばレスポンシブやタッチ操作に対応したスライダーを実装することができます。しかも軽量・シンプル・高速に動作するプラグインなのが嬉しいですね。今求められている必要な機能や特徴をしっかりと抑えてくれているプラグインといった感じですね。今後jQueryでスライダーを実装する時の選択候補の1つになりそうです。以下は使い方です。

[ads_center]

Glide.jsの使い方

実際のデモでは左右両サイドにある矢印や下部のナビゲーションからスライドさせて切り替えることができます。

Glide.js

Glide.js

特徴としては以下のようなものがあります。

  • 軽量(min版では5KB以下)
  • 高速に動作するCSS3のtransitionsを使用
  • レスポンシブやタッチデバイスに対応
  • スワイプ対応
  • キーボード対応

これらの他にも充実したオプションやAPIなど色々あります。

使い方は、まずhead内にjQuery本体とGlide.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">

続いてHTMLでスライダーをマークアップしていきます。親要素のdivにはsliderというクラス名を付与します。スライダー自体はulリストで記述していきます。ulにはslides、liにはslideというクラス名を付けます。

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

あとはセレクターに「.slider」を指定してプラグインをセットするだけです。

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

使い方自体はとてもシンプルで分かりやすいかと思います。

オプション

オプションを指定する場合は以下のようにします。

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

オートプレイ(自動再生)やアニメーションタイム、または矢印やナビゲーションなど他にも色々と設定することができます。カスタマイズする際に活用していきたいですね。

関連記事

  1. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  2. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  3. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  4. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  5. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  6. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP