JavaScriptテックラボ

Easy Slider -画像やコンテンツをスライドで切り替える[jQueryプラグイン]

使用方法

リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。
Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Easy Sliderからファイル一式をダウンロードします。

Easy Slider 1.7 - Numeric Navigation jQuery Slider

HEAD要素にjQueryとEasy Sliderプラグインを呼び出すコードを記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider.js"></script>

続けてHEAD要素にEasy Sliderを呼び出すスクリプトを記述します。
オプションでいろいろな機能やアニメーションを設定できます。

<script type="text/javascript">
$(function(){
$("#slider-main").easySlider({
prevText: '<< 前へ',	// 戻るボタンのテキスト設定
nextText: '次へ >>',	// 進むボタンのテキスト設定
auto: true,			// 自動スクロール設定
speed: 3000,		// スクロールスピード設定
pause: 3000,		// 表示時間設定
continuous: true,	// アニメーションのループ設定
});
});
</script>

Easy Sliderのオプション設定

Easy Sliderは見た目や機能を変更するオプションが用意されています。

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',
lastText: 		'Last',
lastShow:		false,
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false,
numeric: 		false,
numericId: 		'controls'
prevId

[Previous]ボタンのid属性を設定します。
prevText
[Previous]ボタンのテキスト設定です。
デフォルトは Previous です。
nextId
[Next]ボタンのid属性を設定します。
nextText
[Next]ボタンのテキスト設定です。
デフォルトは Next です。
orientation
スライドを縦にするか横にするかの設定です。
デフォルトは横スライドで、縦にスライドさせたい場合はorientationの値を vertical に設定します。
speed
アニメーションのスピードをミリ秒で設定します。
デフォルトは800ミリ秒です。
controlsShow
コントロールの表示設定です。
デフォルトは true です。
controlsBefore / controlsAfter
コントロール([Previous]/[Next]ボタン)の前後に指定したタグを挿入できます。

例:
controlsBefore:'<div id="controls">',
controlsAfter:'</div>',

controlsFade
画像の最初や最後になった際に、[Previous]ボタンや[Next]ボタンを自動的に非表示にさせることができます。
デフォルトは false で、true に設定すると自動でボタンの表示・非表示を切り替えます。
firstShow / lastShow
true に設定することで、FirstボタンやLastボタンを表示させることができます。
auto
自動的にスライドするかどうかの設定です。
デフォルトは false で、自動的にスライドしません。
pause
アニメーション後、コンテンツの表示時間をミリ秒で設定します。
continuous
アニメーションをループ設定させるかどうかの設定です。
デフォルトは false で、ループしません。
numeric (NEW!)
ページ番号ナビゲーションの設定です。
デフォルトは false で、true に設定するとページ番号ナビゲーションが表示されます。
numericId (NEW!)
ページ番号ナビゲーションのid属性を設定します。

BODY要素にスライドさせたいコンテンツを記述します。

<div id="slider">
<ul>
<li>スライドコンテンツ</li>
</ul>
</div>

コンテンツにあわせてCSSを調整します。

知っておくと得するノウハウ

[Next]/[Previous]の表示は、Easy Sliderのダウンロード素材の中にあるscreen.cssでコントロールしています。そこではleftで指定しているため、上の階層でマージンやセンタリングをしていると、表示が崩れてしまいます。
表示が崩れた際は、left指定をmargin-leftに変更するだけで簡単に修正できます。

#slider1next, #slider1prev{
margin-left:-30px;
}
#nextBtn, #slider1next{
margin-left:450px;
}
デモ

関連記事