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. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

  2. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  3. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  4. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  5. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP