5つの無料画像比較スライダスクリプト

オーバーレイスライダーを使用すると、2つの画像を重ね合わせた状態で2つの画像を比較することができます。操作可能なスライダーをユーザーがドラッグすると、前の画像が少なくなり、後の画像が多く表示されます。逆の場合も同様です。.

火星の大気の過酷な影響や半世紀にわたる都市景観の変化を見ることなど、特定のシナリオに最適な方法です。.

デザイナーにとって、それはテクニックやアプローチがオリジナルのイメージに与える変化の量を反映するための素晴らしい方法でもあります。比較目的で使用できるさまざまなJSライブラリーがあります。ここではそれらの5つです.

20代

20代 2つの画像の違いを簡単に確認できるようにするための視覚的なツールです。このツールはjQueryとjquery.event.moveを利用して動作します。使い方はとても簡単です。2つの画像を1つのコンテナーに重ねて呼び出してください。 20（）; コンテナ用.

その後：

 $（ "＃container"）。20（）; 

20代は応答性が高く、すべてのデバイスで機能します。Foundationフレームワークを使用している場合は、そのまま使用できます。.

並置

並置 2枚のメディア（写真またはGIF）を比較して、時間の経過に伴う画像間の変化を簡単に強調するのに役立ちます。このプラグインは使いやすく、すべてのデバイスで動作します。ただ2つの画像を提供してから利用可能なオプションでプラグインを呼び出します.

オプションでは、スライダの開始位置の設定、垂直または水平の設定、ラベルとクレジットの追加、アニメーションなどを設定できます。.

下記のデモを試してください。

imgSlider

imgSlider 画像比較スライダーを作るためのシンプルなjQueryプラグインです。使い方はシンプルで簡単です。そのJSとCSSを含めた後、画像をdivで囲みます。 左 のクラス 前 イメージ 右 のクラス 後に 画像を呼び出してから起動 .スライダー（）;. プラグインのオプションには、スライダーの初期位置の設定、スライダーへの指示の追加/表示などがあります。.

プラグインを呼び出します。

 $（ '。slider'）。slider（）; 

ココエン

ココエン jQuery-Touchイベントを使用してタッチを有効にします。次のようなHTML構造のため、適用は簡単です。 20代 プラグインスクリプトスタックでは、jQueryの他に、このプラグインと一緒にjQuery Touch Eventライブラリを含める必要があります。.

 
   
 $（document）.ready（function（）$（ '。cocoen'）。cocoen（）;）;

下記のデモを試してください。

画像比較スライダ

CodyHouseは、ドラッグイベントを処理し、モバイルサポートを追加するために、CSS3、jQuery、およびいくつかのスクリプトを使用して画像比較スライダのデモを作成しました。あなたはここでこのプラグインを使うための完全な説明と指示に従うことができてここでデモを見ることができます.

下記のデモを試してください。

さらに3つあります。

カト - 他のプラグインは依存関係としてjQueryを必要としますが カト 作業に依存性を必要としないため、イメージ比較スライダー用のより軽量なライブラリーになります。使い方は簡単です。CatoのCSSおよびJSライブラリを含め、そのHTML構造に従うだけです。.

ツールチップの追加、スライダの方向の変更、セピアやグレースケールなどのフィルタ効果の追加など、スライダに適用できるオプションがあります。ただし、Catoは現在WebKitのみをサポートしています。.

ビフォアーアフター - これは軽量で完全にレスポンシブで、あらゆるレイアウトとサイズで機能します。 Codepenでライブデモを見ることができます.

HTML5ビデオ比較スライダ - 他の開発者が画像の比較スライダーを作成しようとすると、Dudley Storeyがそのスライダーをビデオに適用します。仕事をするために、彼はjQueryとほんの数行のコードを利用します。アクションを見るためにCodepenのデモを見てください.