本記事では画像比較スライダー Image Compare Viewerの使い方をまとめました。
Image Compare Viewerは以下を満足する便利なスクリプトです。
- jQuery不使用
- 軽量
- 商業利用可
npmでのインストール方法とCDNでの利用、2つの場合でそれぞれ記載しています。
公式サイトにはデモや実装に関する詳細も記載されています。
npmでのインストール方法
1.image compare viewerをインストール
npm install image-compare-viewer2.JavaScriptをインポート
import ImageCompare from "image-compare-viewer";CSSをインポート
import "image-compare-viewer/dist/image-compare-viewer.min.css";1個設置する場合
const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();複数個設置する場合
const viewers = document.querySelectorAll(".image-compare");
viewers.forEach((element) => {
let view = new ImageCompare(element).mount();
});例えばAstroで1個実装するときは以下のように記載します。
importはフロントマター（---で囲まれた部分）に記載せず、<script>タグ内で書きます。
<script>
import ImageCompare from "image-compare-viewer";
import "image-compare-viewer/dist/image-compare-viewer.min.css";
const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();
</script>そしてHTMLです。
2枚の画像とidを指示するだけのシンプルな記載です。
<div id="image-compare">
<img src="before.jpg" alt="" />
<img src="after.jpg" alt="" />
</div>CDN（Content Delivery Network）で利用する方法
headタグに以下を記載します。
<head>
<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css" />
</head>その他、<script>タグやhtmlは同様です。