TwentyTwentyの設定と使い方：2枚の画像をスライドして比較

プラグイン「TwentyTwenty」を追加すると、2枚の画像を重ねて表示させ、中央のスライドバーでビフォーアフターを切り替えることができます。2枚の画像を比較する際に使うと便利です。

主要ブラウザ「Chrome」「Safari」「FireFox」「IE9+」だけでなく、レスポンシブデザイン「iOS」「Android」に対応しているのも特徴です。

設定

プラグインからTwentyTwentyを追加して有効化させます。

使い方

下記ショーコードで2枚の画像を囲むだけで機能します。

例えば、レタッチ前とレタッチ後の写真を比較してみます。

中央スライダーの矢印をドラッグして、左右に動かせばビフォーアフターを切り替えできます。スライダーより左はビフォー画像、スライダーより右はアフター画像です。

メディアにリンクを付けても無効化されます。

また、サイズ（縦横比）の異なる画像を使うこともできますが、レイアウトが崩れる可能性があるので、できるだけ同じ大きさの画像を使って下さい。

中央寄せにするCSS

中央に配置したい時は下記CSSを追加して下さい。

最後に

2枚の画像を比較させたい時に使うと便利なプラグインです。他にも、スライドさせると文字が表示されるといったギミック的な使い方もできますから、発想次第ではいろんな応用が利くと思います。

ただ、画像遅延読み込み系のプラグインと相性が悪いので、一緒に使う場合は「TwentyTwentyのクラス属性だけ除外する」「TwentyTwentyの画像だけ除外する」等して下さい。