PgwSlider

JavaScript

レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

PgwSliderというjQueryプラグインを使えばレスポンシブで軽量なスライダーを実装することができます。実際のデモではサムネイルのナビゲーションがサイドに並んでおり、画面を縮小(モバイル時)するとサムネイルが下部に移動します。フェードで切り替わっていくアニメーションが美しいですね。

[ads_center]

PgwSliderの使い方

PgwSlider

PgwSlider

使い方もシンプルでわかりやすいです。

$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});

オプションで自動スライドの設定やトランジション、またはインターバルのスピードなんかを調整することができます。

レスポンシブなスライダーを実装したい時の選択肢の1つとしていかがでしょうか。

ナビゲーションが固定された30の素晴らしいWebデザイン前のページ

コピペチェックツールに最適!テキスト比較でどこが違うか発見できる「difff《デュフフ》」次のページ

関連記事

  1. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  2. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  3. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  4. Tiny Colorpicker
  5. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

最近の記事

  1. チャイラテ
  2. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  3. COMOLI ナッピングウールショーツ
  4. 川上庵(麻布十番)牡蠣天せいろ
  5. COMOLI ウールフリースセットアップ
PAGE TOP