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. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  2. no-image
  3. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  4. jQuery plugin Watermark
  5. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  6. jQuery Tabs with Content Overlays

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP