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を実装

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

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

関連記事

  1. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  2. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  3. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  4. Rainbow.js
  5. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

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

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP