Начнём с DEMO работы слайдера Image Comparison Slider (за основу взята библиотека Cocoen):
Как сделать слайдер сравнения изображений?
- Для начала нам понадобятся 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>
Если всё сделали правильно, то получится результат как выше в статье. Пишите комменты, делитесь статьёй в социальных сетях 😉