JavaScript

HTML5・CSS3・jQueryで作るレスポンシブなスライダーを実装できるjQueryプラグイン「Slippry」

SlippryというjQueryプラグインを使えば、HTML5・CSS3・jQueryを使ったレスポンシブなスライダーを実装することができます。実際のデモでは、前後切替の矢印や下部ナビゲーションもついていて優雅な感じで切り替わっていきます。使い方もシンプルなのが嬉しいですね。

[ads_center]

Slippryの使い方

Slippry

Slippry

head内にjQuery本体とプラグインファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slippry.min.js"></script>
<link rel="stylesheet" href="slippry.css" />

HTMLを記述していきます。

<ul id="slippry-demo">
    <li>
        <a href="#slide1">
            <img src="img1.jpg" alt="キャプション<a href='#link'>リンク</a>">
        </a>
    </li>
    <li>
        <a href="#slide2">
            <img src="img2.jpg"  alt="キャプション">
        </a>
    </li>
    <!-- 中略 -->
</ul>

あとはSlippryを呼び出すだけです。

jQuery(document).ready(function() {
    jQuery('selector').slippry()
});

レスポンシブなスライダーを実装したい時には覚えておきたいプラグインですね。

関連記事

  1. jQuery Flip-Quote
  2. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  5. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  6. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP