Режимы overlay и bar

Модуль поддерживает два режима взаимодействия с парой изображений. Они используют одни и те же фотографии и стартовую позицию, но по-разному показывают управляющий элемент.

[Скриншот 1: сравнение одной пары в режиме overlay]

Overlay

overlay — основной визуальный режим. Изображения располагаются в одной области, а граница между ними проходит прямо по фотографии.

Пользователь двигает невидимый диапазон поверх всей области. При перемещении:

граница смещается от 0 до 100;
левая часть одного изображения становится шире или уже;
вторая фотография занимает оставшуюся часть;
вместе с границей перемещается линия и круглая ручка.

Для overlay работают настройки цвета и толщины разделительной линии, цвета круга и логотипа внутри ручки.

Bar

bar выводит управляющий стандартный ползунок отдельной строкой под изображением. Положение границы внутри изображения всё равно синхронно меняется.

Этот вариант подходит, если:

не хочется перекрывать фотографию круглой ручкой;
дизайн сайта предполагает привычный элемент управления под контентом;
на изображении много мелких деталей в центре;
линия overlay выглядит слишком заметно.

[Скриншот 2: та же пара в режиме bar]

Стартовая позиция

Оба режима используют значение от 0 до 100.

0 — граница у левого края;
25 — видно примерно четверть одной стороны;
50 — стандартное равное сравнение;
75 — акцент смещён к другой стороне;
100 — граница у правого края.

В инфоблоке позицию можно задать отдельно для каждого элемента. В ручном компоненте используется MANUAL_START_POS.

Что выбрать по умолчанию

Для портфолио чаще всего подходит overlay + 50%. Посетитель сразу понимает механику блока и видит обе версии изображения.

Bar стоит использовать, если дизайн требует более спокойного интерфейса или центральная ручка мешает воспринимать фотографию.

Бейджи

Бейджи «До» и «После» не зависят от режима. Их можно включить или выключить глобально для компонента и изменить текст.

Если аудитория может не сразу понять, какая сторона показывает исходное состояние, рекомендуется оставить бейджи включёнными.

Логотип

Логотип визуально применяется к круглой ручке overlay. В bar отдельная круглая ручка поверх изображения не используется, поэтому логотип там не играет такой роли.

Переключение элементов

Если компонент из инфоблока выводит несколько элементов, каждый элемент может иметь собственный MODE и START_POS. После нажатия на иконку активная пара открывается со своими настройками.

Особенности на мобильных устройствах

Ползунок рассчитан на изменение позиции через стандартный элемент range, поэтому работает как мышью, так и касанием. При проверке страницы важно убедиться, что рядом нет других элементов, перехватывающих жесты.

Как оценить результат

Проверьте крайние положения 0 и 100, середину, несколько быстрых перемещений и переключение между элементами. Если изображения подготовлены правильно, переход должен выглядеть плавно, без скачков размеров.

[Скриншот 3: примеры стартовой позиции 25%, 50% и 75%]