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

Начнём с DEMO работы слайдера Image Comparison Slider (за основу взята библиотека Cocoen):

Как сделать слайдер сравнения изображений?

1. Для начала нам понадобятся js библиотека в связке с css стилями, скачиваем и распаковываем cocoen-image-comparison-slider.zip. А так же подготовьте два изображения, которые хотите сравнивать.
2. Подключаем к страничке файл из архива cocoen.min.css вот так <link rel="stylesheet" href="(путь к файлу)/cocoen.min.css">
   Можно конечно достать стили из файла и поместить их в свой файл css. А ещё вариант, это достать стили из файлика и вставить внутри странички обернув в <style></style>
3. После внедрения стилей, вставим конструкцию слайдера сравнения изображений в нужное место странички:
   <div class="cocoen">
<img src="(путь к файлу)/before.jpg" alt="">
<img src="(путь к файлу)/after.jpg" alt="">
</div>
4. Ещё ниже подключим js файл из архива cocoen.min.js, который запустит работу слайдера Image Comparison Slider:
   <script src="(путь к файлу)/cocoen.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
new Cocoen();
});
</script>

Если всё сделали правильно, то получится результат как выше в статье. Пишите комменты, делитесь статьёй в социальных сетях 😉