FilmRoll

JavaScript

中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

FilmRollというjQueryプラグインを使えば中央に来た項目に焦点を当てることができるカルーセルを実装することができます。実際のデモでは中央に来た項目が黄色い枠で囲まれます。また、項目を動かさずに黄色い枠だけを移動させたりも出来ます。以下は使い方です。

[ads_center]

FilmRollの使い方

FilmRoll

FilmRoll

このように、中央に来た項目を強調させることができます。カルーセル自体がシンプルなので見やすいですね。プラグインが軽量なのも嬉しいです。

FilmRollを読み込み、

<script src="js/jquery.film_roll.js"></script>

コンテンツをHTMLでマークアップ。各項目を内包する親要素にはfilm_rollというidを付与しておきます。

<div id="film_roll">
    <div>
        <a href="..."><img src="..."></a>
    </div>
    <div>
        <a href="..."><img src="..."></a>
    </div>
</div>

そしてFilmRollを呼び出します。

<script>
$(function() {
    fr = new FilmRoll({
        container: '#film_roll',
        height: 330
    });
});
</script>

オプションも用意されているので、気になる方は是非チェックしてみて下さい。

関連記事

  1. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  2. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  3. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  4. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  5. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  6. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

コメント

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

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

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP