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. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  2. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  3. Relocator
  4. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

コメント

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

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

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP