🙂 Делаем свой слайдер для картинок «было — стало» 12 июля 2022 года телескоп Webb прислал первое полноценное фото чужих галактик в высоком разрешении. Чтобы оценить, насколько продвинулись технологии, сделаем слайдер «было — стало» и сравним новое фото со старым от телескопа Хаббл. Логика проекта ⤵️ Нам нужно расположить две фотографии на странице в одном и том же месте, только одну сделать как бы поверх другой. Когда перемещается слайдер, на самом деле мы изменяем координаты правой стороны левой картинки (которая выше) — так кажется, что одно фото превращается в другое. Для этого мы сделаем так ⤵️ 🔜 Создаём на странице общий контейнер для картинок и по одному для каждой по отдельности. 🔜 Рисуем рамки и разделитель с кругляшом посередине. 🔜 Добавляем обработчик сдвига разделителя — он поменяет границу правого фото в соответствии с положением слайдера. 🔜 Чтобы проект работал на смартфонах, добавим обработку нажатия на экран, чтобы слайдер плавно переезжал на место касания. Перейти к уроку 👨‍💻