BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示する方法

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示する方法をご紹介します。

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示するCSS記述

※BeerSlider.cssファイルを読み込みます。その他、必要に応じて変更して下さい。

<link rel="stylesheet" href="BeerSlider.css">
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 14px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0 40px 0;
  line-height: 1.8em;
}
</style>

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示するHTML記述

※ビフォー・アフター画像を重ねて表示するエリア（id=”slider”）内に重ねる2枚のビフォー画像（yakei.jpg）、アフター画像（yakei-after.jpg）を用意します。

<h1>BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示します。<br>以下の画像上でマウスをクリックしながら左右にスライドさせてみて下さい。</h1>

<div id="slider" class="beer-slider" data-beer-label="ビフォー画像">
  <img src="yakei.jpg" alt="">
  <div class="beer-reveal" data-beer-label="アフター画像"><img src="yakei-after.jpg" alt=""></div>
</div>

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示するJavaScriptの記述

※BeerSlider.jsファイルを読み込みます。new BeerSlider( document.getElementById( “ビフォー・アフター画像を重ねて表示するエリアのid” ) )を記述します。

<script src="BeerSlider.js"></script>
<script>
  new BeerSlider( document.getElementById( "slider" ) );    
</script>

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示するデモページ

BeerSlider.jsを使ってビフォー・アフター画像を重ねて2枚の画像の差分をわかりやすく表示するデモページ

ソース元：Beer Slider Responsive & Accessible Before-After Slider

Beer Slider Responsive & Accessible Before-After Slider

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。