baSliderはビフォー・アフターのような2枚の画像の違いを比較できるjQueryプラグインです。ドラッグやタッチで左右もしくは上下にスライドさせることで、2種類の画像を手軽に比較できます。
水平・垂直どちらにも対応
baSliderの実際のデモは以下のページからチェックできます。
デモでは分割された境界線の真ん中にある丸いアイコンをドラッグやタッチでスライドさせることで2枚の画像を簡単に比較できるようになっています。
水平（左右のスライド）だけではなく垂直（上下のスライド）にも対応しているのが便利ですね。
どちらも画像1枚分のスペースで2枚の画像を比較できるので、スペースに余裕がないレイアウトやモバイルには最適です。
また、スライドさせた後に境界線を中央に戻す（リバース）機能も用意されています。こちらはオプションからオン・オフの設定が可能です。
主なオプション項目は、align、start、anim、handler、reverse、speed、height、imgHeightです。先ほどのリバースは「reverse」から設定できます。デフォルト値は「true」です。
また、水平／垂直の指定は「align」から行えます。こちらのデフォルト値は「horizontal」になります。
使い方もとても簡単なので、サクッと実装できるはず。というわけで、2枚の画像を手軽に比較できるjQueryプラグイン「baSlider」の紹介でした。ライセンスはMITとのこと。
baSliderの詳細やダウンロードは、以下のページからどうぞ。
