Сравнение изображений До/После

от EsprimoPlus

Купить: 3 000 руб Онлайн-демо

Скриншоты

https://marketplace.1c-bitrix.ru/upload/update/c8a/m9nz86o9c84111qwmi52m79f8jo21vqn/sc_0.png

https://marketplace.1c-bitrix.ru/upload/update/f50/2doayvv3xvluvcwvvmopz09mkbqfub4i/sc_1.png

https://marketplace.1c-bitrix.ru/upload/update/9e6/hkacz4dxr5anas008dravkewg3s25pxg/sc_4.png

https://marketplace.1c-bitrix.ru/upload/update/897/c6ltu5sdlyd5ia3zy0f3rx8oqwtdj44r/sc7.png

https://marketplace.1c-bitrix.ru/upload/update/c93/svg4re4eubpfaihjvbc6iij1l8d3mnoc/sc8.png

https://marketplace.1c-bitrix.ru/upload/update/bad/iczmtqvakk4p2eg3jxyfozi0sxkv2o9l/sc_5.png

Технические данные

Дата публикации:

09.02.2026

Версия:

1.0.0

Адаптивность:

Да

Поддержка композита:

Нет

Число установок:

Менее 50 раз

Совместимые редакции

Описание

Готовое решение для 1С-Битрикс, позволяющее разместить на сайте интерактивные блоки сравнения двух изображений (“Before/After”). Решение подходит для демонстрации результатов работы и наглядных изменений: ремонт и интерьер, авто, бьюти-услуги, ретушь, медицина, клининг, производство и др.

Основные возможности

Интерактивное сравнение “До/После” с управлением ползунком
Два режима отображения:
- Overlay (перетаскивание по изображению)
- Bar (ползунок под изображением)
Вывод нескольких наборов сравнения с переключением через иконки-табы
Вывод одного набора сравнения в ручном режиме (без инфоблока)
Настраиваемые элементы интерфейса:
- заголовок блока
- подпись (label)
- бейджи “До/После” и их тексты
- логотип в элементе управления
- позиция, размер и отступы иконок вкладок
- адаптивное поведение на мобильных устройствах
Ресайз изображений по пресетам или произвольно, управление качеством WebP (при наличии поддержки на сервере)

Способы использования

Компонент из инфоблока — для портфолио/галереи “До/После”, когда нужно выводить множество примеров и переключаться между ними.
Компонент ручного набора — для лендингов и страниц услуг, где нужен один конкретный пример сравнения.

Преимущества внедрения

Наглядная демонстрация результата повышает вовлечённость и доверие
Гибкая настройка внешнего вида и поведения
Возможность централизованно управлять настройками и при необходимости переопределять их на уровне конкретной страницы

Установка

Установите модуль стандартным способом (через админку Битрикс / Маркетплейс).
В мастере установки можно включить демо-данные — они создадут тестовый инфоблок и примеры “До/После” для быстрой проверки.

После установки в административной части появится меню модуля, а в списке компонентов станут доступны:

sendev:compare.beforeafter
sendev:compare.beforeafter.manual

Базовая настройка (глобально)

Откройте настройки модуля в админке и задайте значения “по умолчанию”, которые будут применяться ко всем вставкам компонентов (если не переопределены в параметрах компонента):

заголовок/label, бейджи “До/После”
режим (overlay/bar) и стартовая позиция
логотип (по умолчанию)
цвета и толщина разделителя
параметры иконок и поведение на мобильных
ресайз изображений и качество WebP (при наличии поддержки на сервере)

Настройка через инфоблок (несколько сравнений + табы)

Создайте инфоблок (или используйте демо).
Добавьте элементы “До/После”, загрузите изображения До и После.
Разместите компонент sendev:compare.beforeafter на странице и укажите инфоблок.
Если элементов больше одного — компонент автоматически отобразит иконки-табы для переключения наборов.

Минимальная вставка

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter",
  ".default",
  [
    "IBLOCK_TYPE" => "content",
    "IBLOCK_ID"   => 12,
    "NEWS_COUNT"  => "20",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Настройка “вручную” (одна пара изображений)

Если инфоблок не нужен, используйте sendev:compare.beforeafter.manual:

Укажите MANUAL_BEFORE и MANUAL_AFTER (ID файла или путь/URL).
При необходимости задайте подпись, режим, стартовую позицию, логотип.

Минимальная вставка

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter.manual",
  ".default",
  [
    "MANUAL_BEFORE" => "/upload/before.jpg",
    "MANUAL_AFTER"  => "/upload/after.jpg",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Полезное правило

Параметры компонента всегда важнее глобальных настроек модуля.
Это удобно, когда на разных страницах нужно разное оформление при общих дефолтах.

Техническая поддержка

Техническая поддержка решения осуществляется через специальный раздел по адресу https://sendev.ru/forum/forum5/
Вы можете проконсультироваться по приобретению решения по e-mail support@sendev.ru и через сайт https://sendev.ru/contacts/