シンプルなスライダーのjQueryプラグインを作ってみたver2

シンプルなスライダーのjQueryプラグイン「simpleSlider-v2.js」を作りました。
スライダーの左右に前後のスライド要素が表示されるタイプのスライダーで、機能は前後のスライド、自動スライドとその停止、easingの設定が行えます。

「simpleSlider-v2.js」のデモページはこちら
「simpleSlider-v2.js」のダウンロード

設定方法

基本的には以前作成したsimpleSlider-v1.jsの改造版なので、構造的には同じ部分が多いです。

jQueryとsimpleSlider-v2.jsを読み込みます。
easingを使いたい場合は、こちらのサイトからダウンロードして、一緒に読み込むようにしてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="simpleSlider-v2.js"></script>

HTML

<div id="sample01">
	<ul>
		<li><img src="./img/img01.jpg" width="960" height="450" /></li>
		<li><img src="./img/img02.jpg" width="960" height="450" /></li>
		<li><img src="./img/img03.jpg" width="960" height="450" /></li>
		<li><img src="./img/img04.jpg" width="960" height="450" /></li>
		<li><img src="./img/img05.jpg" width="960" height="450" /></li>
		<li><img src="./img/img06.jpg" width="960" height="450" /></li>
		<li><img src="./img/img07.jpg" width="960" height="450" /></li>
		<li><img src="./img/img08.jpg" width="960" height="450" /></li>
	</ul>
</div>

前後ボタンはclassのついたaタグがJavaScriptから出力されるので、それを使用します。
出力後の最終的なHTMLは以下のようになります。

<div id="sample01">
	<div class="ssv2-inner">
		<ul>
			<li><img src="./img/img01.jpg" width="960" height="450" /></li>
			<li><img src="./img/img02.jpg" width="960" height="450" /></li>
			<li><img src="./img/img03.jpg" width="960" height="450" /></li>
			<li><img src="./img/img04.jpg" width="960" height="450" /></li>
			<li><img src="./img/img05.jpg" width="960" height="450" /></li>
			<li><img src="./img/img06.jpg" width="960" height="450" /></li>
			<li><img src="./img/img07.jpg" width="960" height="450" /></li>
			<li><img src="./img/img08.jpg" width="960" height="450" /></li>
		</ul>
		<a href="" class="ssv2-prev-btn"></a>
		<a href="" class="ssv2-next-btn"></a>
	</div>
</div>

CSS

/* CSSのリセット */
ul {
	margin: 0;
	padding-left: 0;
}
li {
	list-style: none;
}

/* スライダーの調整 */
li {
	float: left;
}
.ssv2-prev-btn,
.ssv2-next-btn {
	display: block;
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	background: #000;
}
.ssv2-prev-btn {
	left: 10px;
}
.ssv2-next-btn {
	right: 10px;
}

#sample01 {
	position: relative;
	width: 960px;
	margin: 0 auto 20px;
}

前後ボタンはスライダーの左右に上下中央になるように配置しています。
ボタンに画像を使用したい場合、画像分の幅と高さを取ってから背景画像として指定するようにしてください。

JavaScript

$(function(){
	$("#sample01").ssv2();
});

オプション

$(function(){
	$("#sample01").ssv2({
		slidewidth: 900,
		slidespeed: 1000,
		autoslide: true,
		autospeed: 3000,
		autostop: true,
		easing: 'easeOutElastic'
	});
});