JQuery lightSlider

JavaScript

軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

JQuery lightSliderは軽量でレスポンシブに対応したサムネイルナビゲーション付きのスライダー、カルーセルを実装することができるjQueryプラグインです。スワイプにも対応しているのでPC、スマホといろんなデバイスで動作します。

JQuery lightSlider

前後移動できる左右矢印やサムネイルナビゲーションが付いているので、スライダーの操作はとてもしやすいですね。他にもスワイプやマウスドラッグをサポートしているのが便利です。

オプションもたくさん用意されており、スピード、自動再生、無限ループ、イージング、サムネイル数などなど細かいカスタマイズもしやすくなっています。

使い方もシンプルですね。jQueryとプラグインファイルを読み込んだ状態で、以下のようにマークアップします。

<ul id="lightSlider">
    <li>
        <h3>スライド1</h3>
        <p>サンプル テキスト</p>
    </li>
    <li>
        <h3>スライド2</h3>
        <p>サンプル テキスト</p>
    </li>
    <!-- 中略 -->
</ul>

あとはlightSliderを呼び出してあげるだけです。

<script type="text/javascript">
$(document).ready(function() {
    $("#lightSlider").lightSlider();
});
</script>

軽量ですが機能性にも優れておりオプションで細かくセッティングすることができるので、これからスマホにも対応したスライダーを実装したい場合には非常に役立つjQueryプラグインですね。

JQuery lightSlider

Diagonal Slider斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」前のページ

MacのSafariでデベロッパーツール(Webインスペクタなど)を表示する方法次のページデベロッパーツールの表示方法

関連記事

  1. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  2. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  3. Basic Metro Dynamic jQuery Tab Menu
  4. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  5. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  6. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP