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()
});

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

フレキシブルなフルスクリーンのテキストエリアを実装できるjQueryプラグイン「jQuery Fullscreen Editor」前のページ

ローカルのWordPressをアップデートしたら管理画面が崩れていたのでその対処方法次のページWordPressの管理画面が崩れた時の対処方法

関連記事

  1. no-image
  2. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  3. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  4. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  5. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  6. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP