ステップ 1: 必要なファイルの準備
まず、TwentyTwentyのライブラリをダウンロードし、プロジェクトに追加します。必要なファイルは以下の通りです。
1. CSS ファイル
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twentytwenty/2.0.0/twentytwenty.min.css">2. JavaScript ファイル
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.event.move/2.0.0/jquery.event.move.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twentytwenty/2.0.0/jquery.twentytwenty.min.js"></script>ステップ 2: HTML 構造の作成
次に、ビフォーアフターの画像を表示するためのHTML構造を作成します。
HTML
<div class="twentytwenty-container">
<img src="before.jpg" alt="Before Image">
<img src="after.jpg" alt="After Image">
</div>ステップ 3: TwentyTwenty プラグインの初期化
jQueryを使ってTwentyTwentyプラグインを初期化します。ページのロード後に以下のスクリプトを実行します。
HTML
<script>
$(function(){
$(".twentytwenty-container").twentytwenty();
});
</script>ステップ 4: カスタマイズ（オプション）
TwentyTwentyにはいくつかのオプションがあり、表示方法をカスタマイズすることができます。例えば、デフォルトのスライダー位置を設定するには以下のようにします。
HTML
<script>
$(function(){
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.5, // 初期位置（0が左端、1が右端）
orientation: 'horizontal', // 'horizontal' か 'vertical'
before_label: 'Before', // ビフォー画像のラベル
after_label: 'After' // アフター画像のラベル
});
});
</script>まとめ
以上でTwentyTwentyを使った画像のビフォーアフター表示の設定は完了です。非常に簡単にセットアップでき、視覚的に効果的なビフォーアフター表示が可能になります。
