Cocoen
Touch-enabled before/after slider. Inspired by before-after.js.
Quick start
Install
Install with NPM
npm install cocoen --saveGet it from CDN
<!DOCTYPE html>
<html>
<head>
<title>Cocoen from CDN</title>
</head>
<body>
<div class="cocoen">
<img src="img/before.jpg" alt="" />
<img src="img/after.jpg" alt="" />
</div>
<!-- Load Cocoen library -->
<script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>
<!-- Turns all `.cocoen` elements into Cocoens -->
<script>
Cocoen.parse(document.body);
</script>
</body>
</html>Or download the latest release.
Usage
Only the class cocoen is mandatory to apply proper default styles:
<div class="cocoen">
<img src="img/before.jpg" alt="" />
<img src="img/after.jpg" alt="" />
</div>Include the cocoen.js script in your page, and then:
Cocoen.create(document.querySelector('.cocoen'));Multiple Cocoens in one page:
Cocoen.parse(document.body);Options
| Option | Type | Description |
|---|---|---|
start |
String | Default: "50". The start position of Cocoen as a percentage. |
color |
String | Default: "#fff". Color of drag control |
Events
| Option | Description |
|---|---|
cocoen-component:connected |
Fires when Cocoen mounts |
cocoen-component:disconnected |
Fires when Cocoen unmounts |
cocoen-component:resized |
Fires when Cocoen dimensions are updated |
cocoen-component:updated |
Fires when Cocoen is updated |
cocoen-component:visible |
Fires when Cocoen is in viewport |
License
The code and the documentation are released under the MIT License.