以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。
[blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"]
しかし今回紹介するスライドショーは、2枚の画像を比較したい時に非常に便利な『比較用スライドショー』です！（通称：Cocoen）
例えば以下のような2枚の画像を比べて見せたいとします。
ここで『比較用スライドショー』を導入すると、以下のように、カーソル操作で2枚の画像を見比べることができるスライドショーが設置できます。
実はこの『比較用スライドショー』は、たった数行のコードを貼り付けるだけで、超簡単に設置することができるのです。
今回はその方法について解説していきます！(ﾟ∀ﾟ)
"CSSファイル" と "JSファイル" のダウンロード
まずは以下のリンクより、比較用スライドショーを設置するのに必要なCSSファイルとJSファイルをダウンロードしてください。
※ダウンロードする際は、以下のリンクを右クリックし、『名前を付けてリンク先を保存』でデータを保存してください。
・CSSダウンロード：cocoen.min.css
・JSダウンロード：cocoen.min.js
ダウンロードした2つのファイルは、それぞれ任意のディレクトリにアップロードしてください。
コードのコピー＆ペースト
続いて、スライドショーを呼び出すためのコードを貼り付けます。
まず、設置したいページの＜head＞＜/head＞内に以下のコードを貼り付けてください。
<link rel="stylesheet" href="cocoen.min.css">
※ここで、『href="cocoen.min.css"』の部分は自身がCSSファイルを置いたディレクトリに変更してください。
続いて、比較用スライドショーを設置したい個所に、以下のコードを貼り付けてください。
<div class="container">
<div class="cocoen">
<img src="../images/hp/XXX.jpg">
<img src="../images/hp/○○○.jpg">
</div>
</div>
<script src="../js/cocoen.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
new Cocoen();
});
</script>
※ここで、4,5行目の○○○・×××の部分は、表示させたい2つの画像の文字列に変更してください。
※また、9行目の『src="../js/cocoen.min.js"』の部分も自身がJSファイルを置いたディレクトリに変更してください。
以上でスライドショーの設置は完了です！
超簡単ですね！(ﾟ∀ﾟ)
スライドショーの大きさを変更したい場合
設置したスライドショーの大きさを変更したい場合は、上のコードの3行目に、以下のように追記してください。
<div class="cocoen" style="width:500px !important;">
<img src="../images/hp/XXX.jpg">
<img src="../images/hp/○○○.jpg">
</div>
</div>
※上記の1行目の "500px" をいじることで大きさを変更できます。
似たような画像を比較してもらいたい際には非常に使いやすいスライドショーです。設置もかなり簡単なので、是非試してみてくださいね！
