Cocoen NPM | npm.io

Cocoen

Touch-enabled before/after slider. Inspired by before-after.js.

Example

Quick start

Install

Install with NPM

npm install cocoen --save

Get 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