Делаем простой слайдер сравнения двух изображений

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

Для начала нам понадобятся js библиотека в связке с css стилями, скачиваем и распаковываем cocoen-image-comparison-slider.zip. А так же подготовьте два изображения, которые хотите сравнивать.
Подключаем к страничке файл из архива cocoen.min.css вот так
```
<link rel="stylesheet" href="(путь к файлу)/cocoen.min.css">
```
Можно конечно достать стили из файла и поместить их в свой файл css. А ещё вариант, это достать стили из файлика и вставить внутри странички обернув в <style></style>
После внедрения стилей, вставим конструкцию слайдера сравнения изображений в нужное место странички:
```
<div class="cocoen">

<img src="(путь к файлу)/before.jpg" alt="">

<img src="(путь к файлу)/after.jpg" alt="">

</div>
```
Ещё ниже подключим js файл из архива cocoen.min.js, который запустит работу слайдера Image Comparison Slider:
```
<script src="(путь к файлу)/cocoen.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function(){

new Cocoen();

});

</script>
```
Если на одной странице будет несколько разных блоков .cocoen, то инициализацию скрипта нужно выполнять так:
```
document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});
```

Делаем простой слайдер сравнения двух изображений

Справочник JavaScript