シンプルなスライダーの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'
	});
});
responsive レスポンシブに対応するかどうかを指定。trueかfalseで初期値はfalse。
slidespeed スライダーの速度を数値で指定。初期値は500。
autoslide 自動でスライドするかどうかを指定。trueかfalseで初期値はfalse。
autospeed 自動スライドする時の待ち時間を数値で指定。初期値は5000。
autostop 自動スライド設定時に、スライダーにオンマウスで自動スライドを停止するかどうかを指定。trueかfalseで初期値はfalse。
easing easingの指定に使用します。
jquery.easing.jsを使用していない場合は、「swing」「linear」から指定。
初期値は’swing’。
このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31