2枚の画像を比較できる画像比較スライダーの簡単導入方法

画像を比較させたい時に便利な、画像比較スライダーの実装方法を分かりやすく紹介します。

画像比較スライダー実装

基本的な使い方

左右にスライドする

垂直方向

上下にスライドする

導入手順

TwentyTwentyをダウンロードする
ダウンロードしたファイルを解凍する
css、jsのファイルをサーバーに上げる
必要なコードをサイトに貼る
画像比較スライダーの表示確認
画像比較スライダー設置完了

TwentyTwentyと自サイトのCSSが干渉して、表示がおかしくなる可能性があります。その時はTwentyTwentyのCSSを修正してください。

CSSの設置

<link href="アップロード先のURL/css/foundation.css" rel="stylesheet" type="text/css" />
<link href="アップロード先のURL/css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" />

Javascriptの設置

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="アップロード先のURL/js/jquery.event.move.js"></script>
<script src="アップロード先のURL/js/jquery.twentytwenty.js"></script>

    $(window).load(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });

HTMLの設置

左右スライド

<div class="large-8 columns">
  <div class="twentytwenty-container">
    <img src="beforeの画像" />
    <img src="afterの画像" />
  </div>
</div>

上下スライド

<div class="large-8 columns">
  <div class="twentytwenty-container" data-orientation="vertical">
    <img src="beforeの画像" />
    <img src="afterの画像" />
  </div>
</div>