Cocoen

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

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

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.

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