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. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  4. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  5. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  6. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP