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. A simple DIY responsive image slideshow
  2. no-image
  3. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  4. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  5. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  6. Smooth Scroll behavior polyfill

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP