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

シンプルなスライダーのjQueryプラグイン「simpleSlider-v1.js」を作りました。
機能は前後のスライド、レスポンシブの対応、自動スライドとその停止、easingの設定が行えます。
「simpleSlider-v1.js」のデモページはこちら
「simpleSlider-v1.js」のダウンロード

設定方法

jQueryとsimpleSlider-v1.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-v1.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">
	<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="ssv1-prev-btn"></a>
	<a href="" class="ssv1-next-btn"></a>
</div>

CSS

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

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

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

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

JavaScript

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

オプション

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