# before-after-plugin

> Comparison sliders are nothing new. There are even pure CSS implementations that is nothing but short of amazing. However, I wasn’t able to find a truly responsive one that was simple enough for our needs. This gave me the chance (and excuse) to build one

Latest version **1.0.0** (published 2023-06-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install before-after-plugin
pnpm add before-after-plugin
yarn add before-after-plugin
bun add before-after-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-06-24 |
| First published | 2023-06-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 77.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | srijan009 |

## Links

- npm: https://www.npmjs.com/package/before-after-plugin
- Repository: https://github.com/srijan009/before-after-plugin
- Homepage: https://github.com/srijan009/before-after-plugin#readme
- Issues: https://github.com/srijan009/before-after-plugin/issues
- npm.io page: https://npm.io/package/before-after-plugin

## Recent versions

- 1.0.0 (latest) — 2023-06-24

## README

# Before After js Plugin

### Simple and Mobile Friendly Before After Slider

Comparison sliders are nothing new. There are even pure CSS implementations that is nothing but short of amazing. However, I wasn’t able to find a truly responsive one that was simple enough for our needs. This gave me the chance (and excuse) to build one myself that can be used anywhere.


#### DEPENDENCIES
- [jQuery](http://jquery.com) for ease

    
#### HTML STRUCTURE
      <div class="item">
         <div class="image-holder">
              <div class="item-before">
                  <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Blonde-After.jpg?v=1682412968"
                      alt="blonde" class="image" draggable="false">
              </div>
              <div class="item-after">
                  <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Blonde-before.jpg?v=1682412931"
                      alt="blonde" class="image" draggable="false">
              </div>
              <div class="item-scroller">
                  <img src="https://cdn.shopify.com/s/files/1/2789/2114/files/Slider.png?v=1682414836"
                      alt="scroller" class="scroll-image">
              </div>
          </div>
      </div>
      
 #### USAGE
    $('.item').beforeAfter();

---
_Source: https://npm.io/package/before-after-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._