Слайдер «до и после» для сайта
Вставьте адреса двух фото (одного размера и ракурса). Перетащите разделитель в предпросмотре и скопируйте код.
Как пользоватьсяДо и после с перетаскиваемым разделителем
Доступно на: 
Слайдер «до и после» для сайта: для чего нужен
Для услуг, меняющих внешний вид чего-либо, — барбершоп, детейлинг, ремонт или уборка — показ «до и после» на одном фото убеждает лучше любого текста.
Вставьте два фото, и генератор соберёт сравнение с разделителем, который перетаскивается пальцем или мышью, подписями, начальной позицией и цветом. Под разделителем находится input range, поэтому он работает со стрелками клавиатуры и озвучивается программами чтения с экрана; обрезка выполняется через clip-path, без библиотек.
Как пользоваться
- Вставьте адреса фото «до» и «после».
- Напишите подписи, описание и начальную позицию.
- Скопируйте код и вставьте на страницу.
Когда использовать
- Барбершоп и салон красоты.
- Детейлинг и кузовной ремонт.
- Ремонт, покраска и уборка.
Частые вопросы
Для какого бизнеса это подходит?
Для любой услуги, меняющей внешний вид чего-либо: барбершоп, салон, детейлинг, ремонт, покраска, чистка мебели, эстетическая стоматология, ландшафтный дизайн. Разница на одном фото убеждает сильнее, чем два отдельных снимка.
Как обеспечена доступность?
Под разделителем на самом деле находится input range: его можно двигать стрелками клавиатуры, а программа чтения с экрана озвучивает процент. У обоих фото есть альтернативный текст.
Должны ли фото быть одинаковыми?
У них должны быть одинаковые пропорции и, желательно, ракурс, снятые из одного места. Если пропорции разные, верхнее фото обрезается по размеру (object-fit: cover).
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.