Advanced

With custom HTML inside the main 'div' and a start position. You can use your own HTML inside, it will not be overwritten (see example below). startPos is set to 25 (percent from left).

html

<div id="example"></div>

const options = {
  beforeImage: '/images/03_before.png',
  afterImage: '/images/03_after.png',
  beforeLabel: 'pink',
  afterLabel: 'blue',
  animateIn: true,
  snapToStart: true,
};

const sic = new sic('#example', options);

percent (from left):

slider:

handleAngle:

orientation:

events:

Advanced ​

Advanced