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. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  2. no-image
  3. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  4. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  5. jQuery UI Month Picker Plugin

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP