Слайдер «до/после»: генератор
Создайте интерактивный ползунок сравнения двух изображений («до/после») прямо в браузере, посмотрите результат в реальном времени и получите HTML/CSS-код для вставки на собственный сайт.
Как это работает
Изображение «после» отображается на заднем плане в полный размер, а изображение «до» накладывается поверх него в контейнере, ширина которого управляется невидимым ползунком: перемещая ползунок, вы постепенно открываете нижнее изображение. Предпросмотр выше работает прямо в инструменте, а сгенерированный код воспроизводит тот же принцип на чистом HTML/CSS, без внешних зависимостей JavaScript.
Как вставить сгенерированный код на мой сайт?
Скопируйте сгенерированный HTML-код и замените оба атрибута src реальными путями к вашим изображениям (размещённым на вашем сервере) или их полными версиями в кодировке base64; встроенный в код нативный ползунок input[type=range] обеспечивает интерактивность без дополнительных библиотек.
Можно ли изменить подписи «до» и «после»?
Да, поля подписей позволяют настроить текст в каждом углу слайдера (например, «До ремонта» / «После ремонта» или даты) как в предпросмотре, так и в сгенерированном коде.
Предпросмотр и генерация кода выполняются целиком в вашем браузере: ваши изображения никогда не отправляются на сервер.