1.Basic - 基本的な使い方

HTML

		

			
    
				
    • 
				
    • 
				
    • 
				
    • 
				
    • 
				
    •

Javascript

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px"
		});

outer_width, outer_height, inner_width, inner_heightの各プロパティを引数に設定します。
単位はpxだけでなく％で設定することも可能です。

2.Set Delay & Duratoin - スライドスピードと静止時間を設定する

Javascript

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px",
			duration       : 200,
			delay          : 2000
		});

duration … バナーがスライドするのにかかる時間(ミリ秒)
delay … 自動的に次のバナーに切り替わるまでの時間(ミリ秒)
デフォルト値は
duration : 500
delay : 5000

3.Stop Auto Slide - 自動ページ送りを停止する

auto : false
を追加することで自動ページ送りを無効にします。
デフォルト値はtrueです。 

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px",
			auto           : false
		});

4.Add Interface - インターフェイスを追加する

Javascript

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px",
			navi           : true,
			pager          : true
		});

navi : true を追加すると左右のナビゲーションボタンが追加
pager : true を追加するとページャー機能が追加されます。
ナビゲーションやページャーのスタイルや画像はCSSから設定します。

HTML

CSS

		/* ------------------

		    NAVI

		-------------------*/

		.banana4_navi {
		    background:url(./banana4images/overlay.png) left top repeat;
		}

		.banana4_navi a:hover {
		    opacity:0.5;
		}

		.banana4_navi_next a {
		    display:block;
		    width:100%;
		    height:100%;
		    text-decoration:none;
		    background:url(./banana4images/next.png) center center no-repeat;
		}

		.banana4_navi_prev a {
		    display:block;
		    width:100%;
		    height:100%;
		    text-decoration:none;
		    background:url(./banana4images/prev.png) center center no-repeat;
		}

		/* ------------------

		    PAGER

		-------------------*/

		.banana4_pager {
		    height:14px;
		    background:#fff;
		    padding:3px 1em;
		    border-radius:10px;
		}

		.banana4_pager a {
		    display:block;
		    float:left;
		    width:15px;
		    height:13px;
		    text-decoration:none;
		    text-align:center;
		    background:url(./banana4images/off.png) center center no-repeat;
		}

		.banana4_pager a:hover {
		    opacity:0.5;
		}

		.banana4_pager a.banana4_pager_off {
		    background:url(./banana4images/off.png) center center no-repeat;
		}

		.banana4_pager a.banana4_pager_on {
		    background:url(./banana4images/on.png) center center no-repeat;
		}

5.About Supporting jQuer Animation Libraries - アニメーションライブラリのサポートについて

banana4では、jQueryアニメーションライブラリである「velocity.js」「jquery.transit」をサポートしています。
banana4を設定しているページでvelocity.jsかjquery.transitが読み込まれていれば、自動的にそれらのライブラリを利用してバナースライドなどのアニメーションを実行します。
いずれのライブラリも読み込まれていない場合は、jQuery標準のanimate()でアニメーションが実行されます。
banana4ではvelocity.jsの使用を推奨しています。
なお、velocity.jsとjquery.transit両方が読み込まれている場合はvelocity.jsが優先されます。

6.Set Easing - イージングを設定する

Javascript

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px",
			easing         : "swing"
		});

easingを指定する形式は、使用しているアニメーションライブラリの形式のものになります。
velocity.jsやjquery.transitを導入せずにeasingを設定する場合は「jQuery Easing Plugin」が必要です。

7.Responsive - レスポンシブに対応する

オプションに
responsive : true
を設定することで、ブラウザのウィンドウ幅がouter_widthより小さくなった時自動的に左右余白が縮小され、さらにinner_widthよりも小さくなった時はバナーのサイズがウィンドウサイズに合わせて縮小されます。
この設定は、outer_width, inner_widthがpxで指定されている時のみ有効になります。

ウィンドウサイズがouter_widthより大きい時

ウィンドウサイズがouter_widthより小さい時

ウィンドウサイズがinner_widthより小さい時

Javascript

		$("#banana4").banana4({
			outer_width    : "660px",
			outer_height   : "230px",
			inner_width    : "360px",
			inner_height   : "230px",
			responsive     : true
		});