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>

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

Audero Smoke Effectスモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect」前のページ

スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」次のページScrolltab

関連記事

  1. parallax-background.js
  2. Yet Another Ripple Plugin
  3. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  4. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  5. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  6. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

コメント

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

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

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP