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. Bootstrap Dropdown Hover
  2. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  3. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. Before and After image script
  6. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP