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

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

デモのキャプチャ

FerroSlider jQuery Plugin

FerroSliderの主な特徴

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

FerroSliderのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

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
    });
});

top of page

©2017 coliss