Flickerplate

JavaScript

フリック&レスポンシブ対応のコンテンツスライダーを実装できるjQueryプラグイン「Flickerplate」

FlickerplateというjQueryプラグインを使ってみました。これとてもいいですね。スマホやタブレットのフリックやレスポンシブにも対応しているコンテンツスライダーを実装することができます。使い方も簡単なので覚えておきたいプラグインです。

[ads_center]

Flickerplateの使い方

Flickerplate

Flickerplate Plugin

head内にjQuery本体とダウンロードしたプラグインファイルを読み込んでいきます。

<link href="css/flickerplate.css" rel="stylesheet" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery-finger-v0.1.0.min.js"></script>
<script src="flickerplate.min.js"></script>

HTMLは以下のように記述します。

<div class="flicker-example">
    <ul>
        <li>
            <div class="flick-title">タイトル1</div>
            <div class="flick-sub-text">サンプルテキストサンプルテキスト</div>
        </li>
        <li>
            <div class="flick-title">タイトル2</div>
            <div class="flick-sub-text">サンプルテキストサンプルテキスト</div>
        </li>
        <li>
            <div class="flick-title">タイトル3</div>
            <div class="flick-sub-text">サンプルテキストサンプルテキスト</div>
        </li>
    </ul>
</div>

最後にFlickerplateをセットすれば完了です。

$(document).ready(function(){
    $('.flicker-example').flicker();
});

こんな感じであっという間にコンテンツスライダーを実装できます。

Flickerplateを実装

左右の端にホバーするとコンテンツを切り替える矢印も表示されます。ちなみに矢印は画像を読み込む必要があります。

オプションも色々あるので詳細は公式サイトで確認してみて下さい。

Sticker.jsペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」前のページ

新しいフリーのフォント集 2014・3次のページ

関連記事

  1. Protip

    JavaScript

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

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

  2. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  3. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  4. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  5. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP