no-image

JavaScript

2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

baSliderはビフォー・アフターのような2枚の画像の違いを比較できるjQueryプラグインです。ドラッグやタッチで左右もしくは上下にスライドさせることで、2種類の画像を手軽に比較できます。

水平・垂直どちらにも対応

デモ

デモでは分割された境界線の真ん中にある丸いアイコンをドラッグやタッチでスライドさせることで2枚の画像を簡単に比較できるようになっています。

水平(左右のスライド)だけではなく垂直(上下のスライド)にも対応しているのが便利ですね。

どちらも画像1枚分のスペースで2枚の画像を比較できるので、スペースに余裕がないレイアウトやモバイルには最適です。

また、スライドさせた後に境界線を中央に戻す(リバース)機能も用意されています。こちらはオプションからオン・オフの設定が可能です。

主なオプション項目は、align、start、anim、handler、reverse、speed、height、imgHeightです。先ほどのリバースは「reverse」から設定できます。デフォルト値は「true」です。

また、水平/垂直の指定は「align」から行えます。こちらのデフォルト値は「horizontal」になります。

使い方もとても簡単なので、サクッと実装できるはず。というわけで、2枚の画像を手軽に比較できるjQueryプラグイン「baSlider」の紹介でした。ライセンスはMITとのこと。

baSlider

Light-ZoomCSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」前のページ

依存性のないシンプルで簡単なモーダルライブラリ「dndod」次のページdndod

関連記事

  1. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  2. HR Navigation Responsive Menu
  3. Parallax Slider with jQuery
  4. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  5. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP