Touch-enabled before/after slider. Inspired by before-after.js.
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.
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);Can be passed directly to Cocoen.create, like:
Cocoen.create(document.querySelector('.cocoen'), {
color: '#ff0000',
orientation: 'vertical',
start: '75',
});or you can set data attributes in the html:
<div
class="cocoen"
data-color="#ff0000"
data-orientation="vertical"
data-start="75"
>
<img src="img/before.jpg" alt="" />
<img src="img/after.jpg" alt="" />
</div>| Option | Type | Description |
|---|---|---|
color |
String | Default: "#fff". Color of drag control |
orientation |
String | Default: "horizontal". Orientation of Cocoen, can be 'horizontal' or 'vertical' |
start |
String | Default: "50". The start position of Cocoen as a percentage. |
| 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 |
The code and the documentation are released under the MIT License.