Skip to content

herrfugbaum/cato.js

Repository files navigation

Build Status codecov

About

Compare Apples To Oranges

Cato Logo

cato.js is a dependency free library for (image) comparison sliders.

It currently gets rewritten in modern JavaScript. Version 1.0.0 (WIP) aims to bring more flexibility, less boilerplate html and better browser support. You can find more info in the roadmap issue.

For the initial (Webkit only) release see v0.0.1

How To

With a CDN

Place the stylesheet inside the <head></head> tag of your HTML file.

  <link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/@herrfugbaum/cato@latest/dest/cato.min.css">

Place the script just before your closing </body> tag of your HTML file.

  <script src="https://cdn.jsdelivr.net/npm/@herrfugbaum/cato@latest/dest/cato.min.js"></script>

Add the simple HTML inside your <body></body> tag of your HTML file.

<div id="my-slider">
  <img src="path/to/my/image" /> <!-- left image -->
  <img src="path/to/my/image" /> <!-- right image -->
</div>

Add this JavaScript snippet inside your <body></body> tags of your HTML file and wrap it with a <script></script> tag. Alternatively you can place this inside a, for example, index.js file and load it with <script src="path/to/my/index.js"></script>. In both cases make sure to place this script tag after the tag in which you load the Cato library from the CDN.

You can find a working example in the examples/global-variable/ directory.

const options = {
  direction: 'vertical', // string horizontal & vertical
  width: 700, // integer defaults to max-width: 100%; via CSS
  height: 450, // integer defaults to height: auto; via CSS
  initial: 30, // integer default = 30px (initial position for slider in px)
  filter: {
    active: true, // boolean
    effect:
      'grayscale(200%)' /* url, blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia */,
  },
}

const container = document.getElementById('my-slider')

const mySlider = new Cato(options, container)

mySlider.createSlider()

If you are searching for the initial Webkit-only release, you can find the How To of version 0.0.1 here.

Changelog

0.0.1 Initial Release