Произошла ошибка...
Для генерации кода необходимо внести данные во все обязательные поля.
Код успешно скопирован!
Как вставить код в Taptop?
Откройте настройки страницы в Taptop
В блоке «Перед тегом body» вставьте сгенерированный код
Опубликуйте страницу
Проверьте работу расширения на опубликованном сайте
Расширение не работает? Прочтите раздел «Решение возможных проблем» в документации, перепроверьте все шаги инструкции или обратитесь в поддержку.
Слайдер до/после
Это расширение позволяет добавить на страницу интерактивный слайдер для визуального сравнения двух изображений ("до" и "после").
Uprock
Автор
Бесплатно
Цена
10 мая 2025
Обновлено
Для подключения расширения необходим компьютер
Вы просматриваете страницу с мобильного устройства. Чтобы подключить расширение к Taptop, пожалуйста, откройте эту страницу на компьютере и следуйте инструкции.
Инструкция по подключению расширения
Как работать с инструкцией?
Вы загружаете два изображения в Taptop и копируете их URL-адреса.
В генераторе ниже вы указываете эти URL, класс блока-контейнера на вашей странице и настраиваете параметры слайдера.
Генератор создает <script>, который вы вставляете в настройки страницы Taptop.
Скрипт автоматически находит ваш блок-контейнер и вставляет в него готовый слайдер с вашими изображениями.
Как работает расширение?
Вы загружаете два изображения в Taptop и копируете их URL-адреса.
В генераторе ниже вы указываете эти URL, класс блока-контейнера на вашей странице и настраиваете параметры слайдера.
Генератор создает <script>, который вы вставляете в настройки страницы Taptop.
Скрипт автоматически находит ваш блок-контейнер и вставляет в него готовый слайдер с вашими изображениями.
Установка и использование
Шаг 1: Подготовьте изображения и контейнер в Taptop
Загрузите два изображения ("до" и "после") в ресурсы Taptop. Убедитесь, что они имеют одинаковые размеры (ширину и высоту в пикселях) для наилучшего результата. Скопируйте их полные (абсолютные) URL-адреса, начинающиеся с https://....
Для добавления изображений нажимаем на синюю кнопку
Добавляем изображения
Копируем абсолютную ссылку
Затем на странице Taptop, где должен быть слайдер, добавьте пустой блок (Div Block). Выделите этот блок и назначьте ему уникальный CSS-класс.
Назначаем класс
Задайте этому блоку нужные размеры (ширину и/или высоту) с помощью стандартных настроек Taptop (на панели стилей). Слайдер займет 100% ширины этого блока, а его высота автоматически подстроится под пропорции ваших изображений.
Важно: Если вы зададите контейнеру высоту, которая не соответствует пропорциям ваших изображений, слайдер все равно сохранит пропорции картинок и может не заполнить всю высоту контейнера. Чтобы слайдер точно соответствовал заданным размерам, готовьте изображения с нужным соотношением сторон заранее.
Шаг 2: Настройте генератор кода
Обратитесь к генератору кода и заполните следующие поля:
URL изображения "ДО" (*): Вставьте скопированную полную ссылку на первое изображение.
URL изображения "ПОСЛЕ" (*): Вставьте ссылку на второе изображение.
CSS-класс блока-контейнера (*): Введите точно то же имя класса, которое вы задали пустому блоку (Div Block) на шаге 1
Начальное положение (%): Установите позицию разделителя при загрузке страницы (50% = по центру).
Ориентация слайдера: Выберите, как будет двигаться ползунок (горизонтально или вертикально).
Дополнительные опции: Отметьте, если нужна активация по наведению или перетаскивание только за ручку.
Стилизация (опционально): Настройте внешний вид линии и ручки по своему вкусу или оставьте значения по умолчанию.
Предпросмотр: Оцените результат в области предпросмотра (можно менять его размеры для проверки адаптивности).
Решение возможных проблем
⁉️ Слайдер не появился на странице
Проверьте CSS-класс: Убедитесь, что класс, указанный в генераторе, в точности совпадает с классом, назначенным пустому Div Block в Taptop.
Код вставлен? Проверьте, что сгенерированный <script> действительно вставлен в настройки страницы Taptop в "Перед тегом <body>".
Страница опубликована? Изменения вступают в силу только после публикации.
Контейнер не пустой? Убедитесь, что Div Block, которому вы назначили класс, действительно пустой и в нем нет других элементов.
⁉️ Изображения не загружаются
Проверьте URL: Убедитесь, что URL изображений, вставленные в генератор, корректны и ведут непосредственно к файлам картинок (.jpg, .png, .webp и т.д.). Попробуйте открыть URL прямо в браузере. Используйте абсолютные URL (начинающиеся с https://).
Изображения не загружаются после смены доменного имени сайта: Обновите ссылки на изображения.
⁉️ Cлайдер выглядит не так, как в превью / Неправильные размеры
Размеры контейнера: Проверьте размеры (ширину и высоту), заданные блоку-контейнеру в Taptop. Слайдер адаптируется по ширине, но его высота зависит от пропорций картинок.
Пропорции изображений: Для предсказуемого результата используйте изображения "До" и "После" с одинаковыми пропорциями и размерами.
Стили сайта: Возможно, общие стили вашего сайта Taptop влияют на отображение слайдера. Проверьте стили родительских элементов контейнера.
<before-after-slider-generator></before-after-slider-generator>
