BeerSliderはVanilla JSによるアクセシブルなビフォーアフター画像を実装できます。2枚の画像を比較する時にはとても便利な機能です。中央のボタンをスライドさせることで簡単に比較できるほか、キーボードにも対応しています。
2枚の画像を効率よく比較
以下のページからBeerSliderの実際のデモ動作をチェックできます。
画像の中央には左右の矢印が付いたボタンが設置されていて、ここを左右にスライドさせることで同じ領域内で2枚の画像を比較できるようになっています。ビフォーアフター画像を効率よく快適な操作でユーザーに比較させたい場合に最適な機能ですね。
また、キーボードの左右矢印キーからでもスライドさせることが可能です。
使い方やマークアップもシンプルで分かりやすく簡単に実装できるかと思います。
デモはレスポンシブにも対応しているのでスマホやタブレットなどモバイルからでも操作しやすいのがグッドです。
というわけで、アクセシブルなビフォーアフター画像を実装できる「BeerSlider」の紹介でした。BeerSliderの詳しい実装方法やダウンロードは以下のページからどうぞ。
