cis
compare-image-slider
npm i compare-image-slider
cis

compare-image-slider

Compare two images with a slider

by John Walley

0.1.15 (see all)License:MITTypeScript:Built-In
npm i compare-image-slider
Readme

compare-image-slider

npm Published on webcomponents.org npm

A simple tool for comparing two images.

To use the compare-image-slider component in your code:

From your project folder, install the component from npm.

npm install compare-image-slider

Import the component.

In a JavaScript module:

import "compare-image-slider";

In an HTML page:

<script type="module">
  import "./path-to/compare-image-slider/before-after-slider.js";
</script>

Or:

<script
  type="module"
  src="./path-to/compare-image-slider/before-after-slider.js"
></script>

Add the component to your application or component:

<compare-image-slider>
  <img slot="left" width="100%" src="./path-to/left-image.png" />
  <img slot="right" width="100%" src="./path-to/right-image.png" />
</compare-image-slider>

Downloads/wk

7

GitHub Stars

13

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

7

OPEN PRs

16
VersionTagPublished
0.1.15
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate