Flipster

JavaScript

レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

レスポンシブにも対応しているシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」をご紹介します。CSS3のtransformの3D変換がベースになっているみたいですね。動きも滑らかで素敵です。ということで以下、使い方です。

[ads_center]

使い方

Flipster

レスポンシブ対応なので、ブラウザを以下のように縮小していくと。

Flipster

このように画面幅に合わせてレイアウトが調整されます。

使い方もとてもシンプルです。

$('.sweet-ass-coverflow-slider').flipster();

HTML。

<div class="sweet-ass-coverflow-slider">
    <ul>
        <li>
            <div>
                <img src="">
            </div>
        </li>
    ・・・(中略)・・・
    </ul>
</div>

対応ブラウザは最新のChrome、Safari、Mobile SafariはOKで、最新のFirefox、IE10も完全ではないですが大体大丈夫みたいですね。IE7、8、9は機能制限があります。

Androidブラウザ、Opera、IE6以下はテストされていません。詳しくはGitHubのページで確認できます。

関連記事

  1. Protip

    JavaScript

    カスタマイズ性抜群のツールチップを実装できる「Protip」

    Protipはカスタマイズ性が抜群のツールチップを実装することができる…

  2. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  3. Image Gallery Threejs
  4. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP