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. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  2. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  3. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  4. PIGNOSE-ParallaxSlider
  5. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP