Коллеги, здравствуйте!
Сегодня расскажу, как создать меняющуюся ползунком картинку по типу «было-стало». Бывают случаи, когда необходимо показать на сайте эффект преображения чего-либо. Допустим, на сайтам, посвященных косметическим услугам. То есть требуется создать интерактивное изображение, которое будет изменяться вслед за движением мышки.

Давайте создадим такой эффект без установки дополнительных плагинов.
Итак, для реализации эффекта меняющейся ползунком картинки «было-стало» на WordPress:
1. Скачайте данный архив и распакуйте его на хостинге в директорию /wp-content/uploads/.

2. В нужном месте Вашей страницы WordPress пропишите следующий код:


где вместо пути в src="..." указывайте путь до своих, соответственно, изображений «до» и «после».

3. В файл header.php вашей темы WordPress до закрывающегося тега разместите код:

Перезагрузите страницу. Вуаля! Получившийся пример можете увидеть ниже. Кроме того, слайдер полностью адаптивный — то есть подстраивается под любой экран!
Как всегда, будут вопросы – на связи 🙂