Skip to content

Latest commit

 

History

History
149 lines (92 loc) · 3.79 KB

README.md

File metadata and controls

149 lines (92 loc) · 3.79 KB
Raw

FullSlider version 1.1.0

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

オプション

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

autoPlay : Boolean (false)

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

autoPlayInterval : Integer (10000)

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

slideDuration : Integer (500)

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

slideEasing : String (swing)

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

imageDuration : Integer (300)

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

imageEasing : String (linear)

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

dialogDuration : Integer (300)

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

dialogEasing : String (swing)

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

inactiveImageAlpha : Number (0.3)

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

FullSliderインスタンスの参照

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