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

関連記事

  1. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  2. Erge Drop Down Menu Control
  3. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  4. NO IMAGE
  5. Rainbow.js

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP