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

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

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

デモのキャプチャ

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


Beer Sliderの特徴

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

  • 単体で動作するシンプルなスクリプト
    vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。
  • jQuery, Zeptoにも対応
    単体でも動作しますが、jQuery, Zeptoのプラグインとしても動作します。
  • レスポンシブ対応
    デスクトップ、タブレット、モバイル、すべてのデバイスをサポート。
  • アクセシブル
    デスクトップのマウス操作とキーボード操作、スマホのタッチ操作をサポート。
  • ライセンス
    MITライセンスで、個人でも商用でも無料で利用できます。

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

デモのキャプチャ

スマホで表示したところ

Beer Sliderのデモ

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

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

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

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

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: 外部ファイル

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

Step 2: HTML

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

Step 3: JavaScript

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

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

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

sponsors

top of page

©2018 coliss