画像比較スライダー | JavaScript逆引き | Webサイト制作支援

2つの画像をスライダーを使って比較するためのライブラリをご紹介します。

デモ

ライブラリのダウンロードと設置

こちらを押下してダウンロードしてください。
ダウンロードしたimage-comparison-slider.jsを任意の場所へ置き読み込みます。

HTML

<script type="text/javascript" src="js/image-comparison-slider.js"></script>

使い方

第一引数（必須）に省略を適用する要素を指定します。
newを使用してインスタンスを生成します。
インスタンスを生成した瞬間に省略が反映されます。

引数	初期値	説明
第一引数必須		適用する要素
第二引数	{ ... }	オプション詳細は次のリンクを参照オプションの詳細

JavaScript

var sampleElem = document.getElementById('sample');

new imageComparisonSlider(sampleElem, {
	image : {
		first  : 'img/picture1.jpg',
		second : 'img/picture2.jpg'
	}
});

HTML

<div id="sample"></div>

CSS

#sample {
	position:relative;
	overflow:hidden;
	border:2px solid #333;
	width:500px;
}

	#sample .image {
		width:100%;
		height:100%;
		vertical-align:top;
	}

	#sample .image.second {
		position:absolute;
		overflow:hidden;
	}

	#sample.horizontal .image.second {
		top:0;
		right:0;
	}

	#sample.vertical .image.second {
		left:0;
		bottom:0;
	}

		#sample .image img {
			vertical-align:top;
		}

		#sample .image.second img {
			position:absolute;
		}

		#sample.horizontal .image.second img {
			right:0;
		}

		#sample.vertical .image.second img {
			bottom:0;
		}

	#sample .slider {
		position:absolute;
		top:0;
		left:0;
		box-sizing:content-box;
		border:none;
		padding:0;
		background-color:rgba(255, 255, 255, 0.9);
		background-clip:content-box;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		cursor:pointer;
		transition:border-color 0.2s;
	}

	#sample.horizontal .slider {
		border-left:4px solid transparent;
		border-right:4px solid transparent;
		width:3px;
		height:100%;
		transform:translate(-50%);
	}

	#sample.vertical .slider {
		border-top:4px solid transparent;
		border-bottom:4px solid transparent;
		width:100%;
		height:3px;
		transform:translate(0, -50%);
	}

	#sample .slider:hover {
		border-color:rgba(255, 255, 255, 0.4);
	}

オプション

次のオプションが利用可能です。

オプションの詳細

名称	型	初期値	説明
direction	string	'horizontal'	スライドする方向 `horizontal` ... 水平にスライド `vertical` ... 垂直にスライド
image 必須	Object	{ first : null, second : null },	表示する画像パス
action	string	'drag'	スライドアクションの種類 `drag` ... ドラッグによるスライド `always` ... マウス移動によるスライド
border	number	0.5	境界線の初期位置 `1` ... 100% `0` ... 0%

JavaScript

var sampleElem = document.getElementById('sample');

new imageComparisonSlider(sampleElem, {
	direction : 'vertical',
	image     : {
		first  : 'img/picture1.jpg',
		second : 'img/picture2.jpg'
	},
	border    : 0.7
});