Сдейлай добро - напиши информацию о рос. войсках в телеграм @evorog_bot

GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Задонатити ₴
Темний режим
GRAVITSAPA.info - интересный блог

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

4282 просмотров Создание сайтов Нет комментов » 29 Гру 2018

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

cocoen before
cocoen after

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

  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>

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

Оставь свой коммент

Наверх