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

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  2. Fluidbox

    JavaScript

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

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

  3. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  4. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  5. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP