スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider

サイト構築 -JavaScript

Post on:2018年9月18日

Beer Sliderの特徴

Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。

単体で動作するシンプルなスクリプト

vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。
jQuery, Zeptoにも対応

単体でも動作しますが、jQuery, Zeptoのプラグインとしても動作します。
レスポンシブ対応

デスクトップ、タブレット、モバイル、すべてのデバイスをサポート。
アクセシブル

デスクトップのマウス操作とキーボード操作、スマホのタッチ操作をサポート。
ライセンス

MITライセンスで、個人でも商用でも無料で利用できます。

Beer Sliderは、スマホでもデスクトップでも快適に動作します。

スマホで表示したところ

Beer Sliderのデモ

Beer Sliderの動作は、デモページで楽しめます。

まずは、シンプルなデモから。

See the Pen BeerSlider - before-after reveal slider - code source, basic demo by Paulina Hetman (@pehaa) on CodePen.

続いて、jQueryのプラグインで実装したデモ。
ビフォーアフターの初期表位置も変更されています。

See the Pen BeerSlider - use with jQuery and various start parameters by Paulina Hetman (@pehaa) on CodePen.

背景を使ったビフォーアフターのデモ。

See the Pen Background Comparison by Paulina Hetman (@pehaa) on CodePen.

画面いっぱいに表示されたビフォーアフターのデモ。

See the Pen Full width full height before-after slider by Paulina Hetman (@pehaa) on CodePen.

スライダーの形を変更することもできます。

See the Pen Circle before-after slider by Paulina Hetman (@pehaa) on CodePen.

Beer Sliderの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="dist/BeerSlider.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="dist/BeerSlider.js"></script>
</body>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

スライダーに表示するビフォーとアフターの画像を配置します。

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

</div>

Step 3: JavaScript

スライダーのラッパーを指定して、スクリプトを実行します。

  <script>
    new BeerSlider(document.getElementById('slider'));
  </script>

new BeerSlider(document.getElementById('slider'));

</script>

オプションでは初期位置などを設定できます。

{
  // start value
  start: '50',
  // prefix 
  prefix: 'beer'
}

{

// start value

start: '50',

// prefix

prefix: 'beer'

}

jQueryやZeptoのプラグインとして利用する場合は、下記のように記述します。

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').BeerSlider({start: 25});
</script>