Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

slick-image-compare

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

slick-image-compare

before and after image comparison slider

latest
Source
npmnpm
Version
0.4.11
Version published
Maintainers
1
Created
Source

MIT License

slick image compare

Is a modern image comparison slider written in vanilla JavaScript and has no dependencies on other libraries. Best for comparing images, image retouching, color adjustments, renderings, etc...

demo

Docs

Read the documentation >>

tl;dr

Module

install the package

pnpm add slick-image-compare

html code

<div id="my-div"></div>

use it in your code

import SlickImageCompare from 'slick-image-compare';
import 'slick-image-compare/style';

const options = {
  beforeImage: 'before.jpg',
  afterImage: 'after.jpg',
};

const sic = new SlickImageCompare('#my-div', options);

Classic

<link rel="stylesheet" href="https://unpkg.com/slick-image-compare/dist/slick-image-compare.css">
<script src="https://unpkg.com/slick-image-compare"></script>

<div id="my-div" style="max-width:640px">
  <img src="before.jpg" alt="before image" />
  <img src="after.jpg" alt="after image" />
</div>

<script>
  const sic = new SlickImageCompare('#my-div');
</script>

Keywords

slick-image-compare

FAQs

Package last updated on 24 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts