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

関連記事

  1. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  2. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  3. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  4. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

最近の記事

  1. SOL001
  2. 末廣ラーメン
  3. ナッティホワイトチョコレートフラペチーノ

アーカイブ

PAGE TOP