Cocoen — сравнение изображений до и после

Визуальное сравнение двух изображений одного и того же момента, но при разных условиях. Передвигая бегунок слева направо или в обратном направлении можно наглядно сравнить состояния До и После.

HTML

Для правильного применения стилей, нужно сохранить наличие класса cocoen.

<div class="cocoen">
    <img src="img/before.jpg" alt="">
    <img src="img/after.jpg" alt="">
</div>

CSS

В шапке подключаем стили скрипта

<link rel="stylesheet" href="css/cocoen.min.css">

JS

Скрипт можно вызывать на чистом jаvascript

<script src="js/cocoen.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        new Cocoen(); // или new Cocoen(document.querySelector('.cocoen'));
    });
</script>

Если на одной странице будет несколько разных блоков .cocoen, то инициализацию скрипта нужно выполнять так:

document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});

Скрипт поддерживает вызов, как jQuery плагин, в этом случае его нужно вызывать так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/cocoen.min.js"></script>
<script src="js/cocoen-jquery.min.js"></script>
<script>
    $(function(){
        $('.cocoen').cocoen();
    });
</script>

подключив предварительно jQuery библиотеку, и дополнительный файл cocoen-jquery.min.js