Skip to content

zouyang2015/fullslider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

the simple full-width slider

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 66.4%
  • CSS 17.8%
  • HTML 15.6%
  • Makefile 0.2%