画像比較を載せたい時に重宝する！スライドして画像を切り替える「JQueryスライダープラグイン」9選

更新日: 2018年05月29日

2つの画像をビフォー・アフターで比較したり、2つの画像の違いを見比べて欲しいときに、どんなふうに画像を配置しますか？
上下に2枚置いたり、あるいは左右に並べて配置させて比べてみたり、様々な方法があります。

その中で、近年様々な媒体で使われている*「画像比較スライダー」*と呼ばれる手段があります。
画像比較スライダーとは、1枚の画像の枠に2枚の画像を重ねて配置し、境界線をスライドさせることで2枚の画像を切り替えることができるウィジェットです。

実装するためのプラグインはすでに多数リリースされており、少しのコードで簡単に実装することができます。

今回は、画像比較ができるjQueryスライダープラグイン9つをご紹介します。
ユーザーのマウス操作やスマートフォンの指の操作で作動するユニークなユーザーインターフェイスなので、ホームページやブログ記事で使うと面白みが増すかもしれません。

画像比較ができるjQueryスライダープラグイン9選

1. jQuery Images Compare

スクリーンショット：2017年10月

jQuery Images Compareは、その名の通りjQueryを使ったシンプルな画像比較スライダーです。
IEでは9以上に対応し、スマートフォンでのタッチにも対応、レスポンシブ対応で、jQueryでロジックを加えることで複雑な処理にも対応します。
JavaScriptファイルはわずか2KBと、軽量なのも嬉しいですね。

2. cocoen

スクリーンショット：2017年10月

cocoenは非常に簡単に設置できるjQuery画像比較スラーダーです。
以下のコードのように、DIVの中に入れたい画像を2枚挟み込むだけで完了です。

<div class="cocoen">
　　<img src="img/before.jpg" alt="">
　　<img src="img/after.jpg" alt="">
</div>

jQuery側でも、ファイルを読み込み、以下のコードを実行するだけでいいのは楽ですね。

$('.cocoen').cocoen();

なお、npmやBowerでの簡易インストールもできるようになっています。

3. Before After Slider

スクリーンショット：2017年10月

Before After Sliderは、シンプルながら人気のある画像比較プラグインです。
iOSやAndroidアプリでも使えるように開発が進んでいます。
境界線を非表示にすることもできるようです。

4. JuxtaposeJS

スクリーンショット：2017年10月

JuxtaposeJSは新聞社のニュース記事などで多く実績のある画像比較プラグインです。
APIにも対応しており、右下にクレジットをつけたり、水平方向に画像比較を行うこともできます。

5. jQuery Sequency

スクリーンショット：2017年10月

jQuery Sequencyは、JSONによって複数枚の画像を比較対象にできるjQuery画像プラグインです。
CSSを操作することでスタイルを自由に整えることもでき、JavaScript側ではスピードやスマートフォンでの見え方(Viewportの設定)を行うこともできます。

6. TwentyTwenty

スクリーンショット：2017年10月

TwentyTwentyはcocoenのように簡単なコードで設置することができる画像比較スライダーです。
カスタマイズも簡単に行えるほか、スタイリングを行うCSSはSass対応しており、いくつかの変数を変えるだけで簡単に画像比較スライダーを設置することができます。
ラベルやオーバーレイの色を変えるのもあっという間です。