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

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  3. jQuery Text Fade Delay
  4. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  5. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP