サイト制作に関するメモ書き

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

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

 

コメントを残す

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

▲PAGE TOP