jQuery Smplslider

スライダーを実装するプラグインです。
これを元にカスタマイズすることを前提にしているため、機能やデザインはシンプルです。

File

Read files

<link rel="stylesheet" href="jquery.smplslider.css">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.smplslider.js"></script>

Example1 - スライドショー

オプションの指定をしないで使用したときの動き。
スライダーというよりはスライドショーな感じ。

<script>
$(function(){
	$('#example1').smplslider();
});
</script>
<div class="samplslider">
	<div class="smplslider-slide-container">
		<div class="smplslider-slides">
			<div class="smplslider-slide">
				<img src="img/image01.jpg" height="750" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image02.jpg" height="619" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image03.jpg" height="667" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image04.jpg" height="662" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image05.jpg" height="667" width="1000" alt="">
			</div>
		</div>
	</div>
</div>

ex1) ループなし

標準ではループする処理ですが、オプションで無効にできます

<script>
$(function(){
	$('#example1_ex1').smplslider({
		loop: false
	});
});
</script>
<!-- HTML省略 -->

ex2) マウスオーバーでスライドショー停止

スライダーとカーソルが重なっている状態のときにスライドショーを停止させます。
カーソルの重なりが解除されると再びスライドショーが再開されます。

<script>
$(function(){
	$('#example1_ex2').smplslider({
		hoverStop: true
	});
});
</script>
<!-- HTML省略 -->

Example2 - スライドショー（ループなし）

オプションの指定をしないで使用したときの動き。
スライダーというよりはスライドショーな感じ。

Example3

オプションの指定をしないで使用したときの動きです。

<script>
$(function(){
	$('#example3').smplslider();
});
</script>
<div class="samplslider">
	<div class="smplslider-slide-container">
		<div class="smplslider-slides">
			<div class="smplslider-slide">
				<img src="img/image01.jpg" height="750" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image02.jpg" height="619" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image03.jpg" height="667" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image04.jpg" height="662" width="1000" alt="">
			</div>
			<div class="smplslider-slide">
				<img src="img/image05.jpg" height="667" width="1000" alt="">
			</div>
		</div>
	</div>
	<div class="smplslider-thumbnail-container">
		<div class="smplslider-thumbnail-list">
			<div class="smplslider-thumbnail-box">
				<img src="img/image01.jpg" height="750" width="1000" alt="">
				<div class="smplslider-thumbnail-mask"></div>
			</div>
			<div class="smplslider-thumbnail-box">
				<img src="img/image02.jpg" height="619" width="1000" alt="">
				<div class="smplslider-thumbnail-mask"></div>
			</div>
			<div class="smplslider-thumbnail-box">
				<img src="img/image03.jpg" height="667" width="1000" alt="">
				<div class="smplslider-thumbnail-mask"></div>
			</div>
			<div class="smplslider-thumbnail-box">
				<img src="img/image04.jpg" height="662" width="1000" alt="">
				<div class="smplslider-thumbnail-mask"></div>
			</div>
			<div class="smplslider-thumbnail-box">
				<img src="img/image05.jpg" height="667" width="1000" alt="">
				<div class="smplslider-thumbnail-mask"></div>
			</div>
		</div>
	</div>
</div>

Option

Name	Value	Initial value	Description
xxx	Strong（文字列）	xxx	xxx

jQuery Smplbox ../index