Разработка простого слайдера изображений в стиле «до/после»

В данной заметке мы рассмотрим реализацию слайдера изображений «до/после» с применением jquery. В своих работах я стараюсь избегать использование готовых решений в виде плагинов и библиотек (за исключением основополагающих разработки), так как свой личный код получается куда более лаконичный и подогнанный под точное решение поставленной задачи.

Представим, что нам нужно реализовать небольшой блок, в котором есть изображение, разделенное на две части — «до и после». Разделительная полоса должна перемещаться от одного края до другого, тем самым раскрывая/сжимая одну из половинок изображения.

В классе slider мы размещаем фоном первое изображение (до). Вложенный класс slider__dynamic содержит второе изображение (после). Ну и сама стрелочка, за которую мы перетягиваем разделитель изображений.

Через скрипты мы должны отслеживает нажатия на slider__arrow, а в классе slider отслеживает не только завершение нажатия, но и координаты нахождения курсора в данной области. Тем самым, при нажатии на slider__arrow мы активируем функцию отслеживания положения курсора в области slider.

При отслеживании положения курсора мы рассчитываем в процентах длину динамической половинки slider__dynamic.

// Из положения курсора в области вычитаем левый отступ от страницы этой области.
// Тем самым мы получаем точку отсчета равную 0 и положение курсора от нее.
let x = e.pageX — $whatisZone.offset().left;
// Дальше вычитаем сколько в процентах будет нахождение курсора мыши в области
let percent = x * 100 / $whatisZone.width();

Процентное значение мы уже задаем slider__dynamic в width или max-width.

В итоге, всего в несколько строчек кода, мы получаем интересную реализацию этой задачи.

Пример работы готово кода: