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

サイト構築 -JavaScript

Post on:2018年9月18日

sponsorsr

スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。

他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。

Beer Slider Responsive & Accessible Before-After Slider
Beer Slider -GitHub

Beer Sliderの特徴
Beer Sliderのデモ
Beer Sliderの使い方

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>