jQuery reSlider index

jQuery / IE8 IE9 IE10 IE11 Chrome Firefox Safari

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

File

gitHub Repository

Read files

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

スライドショー

HTMLの基本形

<div class="reSlider">
	<div class="reSlider-slide-container">
		<div class="reSlider-slides">
			<div class="reSlider-slide">
				<img src="img/image01.jpg" height="750" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image02.jpg" height="619" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image03.jpg" height="667" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image04.jpg" height="662" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image05.jpg" height="667" width="1000" alt="">
			</div>
		</div>
	</div>
</div>

スライダー

操作ボタンを付けることでスライドの切り替えを操作することができるようになります。
ボタンのデザインや配置はスタイルを作ってください。
.reSlider-prev or .reSlider-nextがついたものであればどんな要素でもトリガーになります。

HTMLの基本形

<div class="reSlider">
	<div class="reSlider-slide-container">
		<div class="reSlider-slides">
			<div class="reSlider-slide">
				<img src="img/image01.jpg" height="750" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image02.jpg" height="619" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image03.jpg" height="667" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image04.jpg" height="662" width="1000" alt="">
			</div>
			<div class="reSlider-slide">
				<img src="img/image05.jpg" height="667" width="1000" alt="">
			</div>
		</div>
	</div>
	<button class="reSlider-prev">前へ</button>
	<button class="reSlider-next">次へ</button>
</div>

Example3

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

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

Option

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