1. これはなに
2. 動作に必要なもの
3. 環境
4. 使い方
5. オプション
6. FullSliderインスタンスの参照

画面幅全体に広がるタイプのオーソドックスなスライダーです。 各スライドにダイアログを下から出現させ、表示させます。

• jQuery

• jQuery.easing ※イージングをカスタマイズする場合のみ

• fullslider.js : assets/js/fullslider/fullslider.js

• fullslider.css : assets/csss/fullslider.css

JavaScript自体は下記の環境で検証しました。

• Firefox 最新版
• Chrome 最新版
• IE7+

スタイルシートについてはそれぞれ最新版にて検証、また、Mac版Webkitに最適化されています。 頑張ってCSSにて調整をしてください。

必要なリソースをロードします。

<link rel="stylesheet" href="the/path/to/fullslider.css" />
<script type="text/javascript" src="the/path/to/jquery.min.js"></script>
<script type="text/javascript" src="the/path/to/jquery.easing.min.js"></script>
<script type="text/javascript" src="the/path/to/fullslider.js"></script>

マークアップします。
※HTMLの実装例についてはデモ (demo/index.html) をご参照ください。
また、id は後からJavaScriptで使用する為の物なので、任意の物で結構です。

<div id="my-full-slider" class="my-full-slider">
	...
</div>

実装します。これでスライダーが動作すると思います。

$("#my-full-slider").fullSlider();

あるいは、引数でオプション（後述）を渡して動作を変更する事ができます。

$("#my-full-slider").fullSlider({
	autoPlay : true,
	autoPlayInterval : 8000,
	slideDuration : 800,
	slideEasing : "easeOutBounce"
});

※ オプション名 : 型 (初期値)

自動再生をする、あるいはしない

自動再生のインターバル（ミリ秒）

左右にスライドするアニメーションの速度（ミリ秒）

左右にスライドするアニメーションのイージング関数

イメージ画像のフェードインアニメーションの速度（ミリ秒）

イメージ画像のフェードインアニメーションのイージング関数

下から出現するダイアログのスライドアニメーションの速度（ミリ秒）

下から出現するダイアログのスライドアニメーションのイージング関数

非アクティブの画像のアルファ値（スタイルシートと合わせる事）

jQuery.dataでFullSliderのインスタンスを埋め込んであります。 初期化後に何らかの操作を行いたい時に有用です。 各メソッドについては、ソースを参照してください。

var slider = $("#my-full-slider").fullSlider({ /* options */ });
var myFullSlider = slider.data("fullSlider");

// #button-top をクリックするとオートプレイを止める例
$("#button-stop").on("click", function(){
	myFullSlider.stop();
});

// #button-start をクリックするとオートプレイをスタートする例
$("#button-start").on("click", function(){
	myFullSlider.play();
});

mach3ss

• Blog
• Website
• Twitter