[JS]設置も簡単、機能も豊富、キーボード操作でパネルをスライドする -FerroSlider

サイト構築 -JavaScript

Post on:2011年10月13日

sponsorsr

複数のパネルを縦・横のライン状、L字状、十字状などに配置し、スムーズなアニメーションでスライド表示するjQueryのプラグインを紹介します。

FerroSlider jQuery Plugin

[ad#ad-2]

FerroSliderの主な特徴

各パネルをラインやカラム、マトリックス状に配置が可能。
パネルのスライドはスムーズなアニメーション。
アニメーションのエフェクトはカスタマイズ可能。
アニメーション中は進行方向を表示。
各パネルはアスペクト比を維持してブラウザいっぱいに表示。
カスタマイズしたスクリプトをAJAXで実装可能。
コンテナの中にスライドするコンテンツの要約を設置。
キーボードの矢印キーで操作が可能。
クリックでも操作可能なナビゲーションも設置可能。
コンテンツをスルーできるリンクの設置も可能。

FerroSliderのデモ

デモではデフォルトの状態をはじめ、さまざまなカスタマイズを施したものがあります。
各パネルの配置がいろいろできるので、それを利用して面白いものができるかもしれません。

demo 0
すべてがデフォルトの状態のデモ

demo 1
矢印キー（左・右）のみのナビゲーション

demo 2
デフォルトのレイアウト、イージングのカスタマイズ、ナビゲーションマップ（右中央）、フィードバックアロー

demo 3
カスタマイズしたレイアウト（L字）、イージングのカスタマイズ、ナビゲーションマップ（左下）、フィードバックアロー、ナビゲーションリンク（下）

demo 4
カスタマイズしたレイアウト（十字）、イージングのカスタマイズ、フィードバックアロー、プリロードの背景画像

[ad#ad-2]

FerroSliderの使い方

HTML

各パネルはdiv要素で配置します。

<div id="div1" class="slidingSpaces" title="Page 1">
    first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
    second page
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
    third page 
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
    fourth page
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
    fifth page 
</div>

外部ファイル

スタイルシートとスクリプトを外部ファイルとして指定します。

<link rel="stylesheet" href="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/jquery.ferro.ferroSlider.css" type="text/css">
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript" language="javascript"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" language="javascript"></script>
<script src="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/jquery.ferro.ferroSlider.min.js" type="text/javascript"></script>

JavaScript

適応するパネルのclassをjQueryのセレクタで指定し、スクリプトを実行します。

$(document).ready(function() {
    $('.slidingSpaces').ferroSlider();
});

オプションの指定方法

各オプションも簡単に設定できます。

var matrix = [
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ],
    [
        {full:1},{full:1,first:true},{full:1}
    ],
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ]
];
         
$(document).ready(function() {
    $(".slidingSpaces").ferroSlider({
        axis                    : 'xy',
        displace                : matrix,
        easing                  : 'easeOutExpo',
        createMap               : true,
        feedbackArrows          : true,
        fullScreenBackground    : true,
        mapPosition             : 'bottom_center',
        backGroundImageClass    : 'bg',
        preloadBackgroundImages : true,
        time                    : 300
    });
});