写真を比較するスライダーの作り方

画像のビフォーアフターをわかりやすく表現できたら記事のクオリティーがグッと上がりますよね。

トラ吉

このサイトでも「アイキャッチを工夫したらサイト全体がよくななった話」で写真を比較する際に使用しています。

https://trytrytry.work2019/09/24/eyecatching/

今回はこの写真のビフォーアフターを比較できるスライダーの作り方を解説していきます。

デモをどうぞ
比較スライダーの作り方
複数設置したい場合

デモをどうぞ

まずはじめにデモをどうぞ

こんなものが作れます。

比較スライダーの作り方

cocoenというライブラリを使用することで簡単に制作することができます。

gitから一式をダウンロードして「docs」内の「js」内の

「cocoen.min.js」

「cocoen-jquery.min.js」

上記2つのファイルと「css」内の

「cocoen.min.css」

ファイルを取り出してください。使用するのは上記3つです。

任意のデイレクトリへ取り出せたらhtmlを記載していきます。

hredr部分（html）

<link rel="stylesheet" href="css/cocoen.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/cocoen.min.js"></script>
<script src="js/cocoen-jquery.min.js"></script>

各ファイルを読み込みます。

jqueryを使用するのでCDNなりファイル読み込みなりを行いましょう。

表示部分（html）

<div class="cocoen">
	<img src="パス" alt="">
	<img src="iパス" alt="">			
</div>

</div>

比較したい写真を2つ用意し、「cocoen」というclassをつけたdivで囲えばhtmlは終了です。

js処理（js）

$(function(){
	$('.cocoen').cocoen();
});

$(function(){

$('.cocoen').cocoen();

});

こちらをjsファイルもしくはhtmlファイルへ直書きし終了です。

複数設置したい場合

単純に、「表示部分（html）」で記載した処理を必要な分記載すれば完了です。

js部分は変更する必要はありません。

以上。

ものすごく簡単ですね！！