cocoen
TypeScript icon, indicating that this package has built-in type declarations

3.2.0 • Public • Published

Cocoen

Version Downloads Last commit Build Status Coverage Status License

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

Example

Quick start

Demo

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

License

The code and the documentation are released under the MIT License.

Readme

Keywords

none

Package Sidebar

Install

npm i cocoen

Weekly Downloads

1,045

Version

3.2.0

License

MIT

Unpacked Size

836 kB

Total Files

10

Last publish

Collaborators

  • koenromers