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. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  2. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  3. Vimeo Carousel Gallery
  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

コメント

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

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

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP