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. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  2. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  3. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  4. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  5. SVG 3D Tag Cloud jQuery Plugin
  6. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP