Как сделать слайдер «До-После» в зеро блоке Tilda?

1. Чтобы в слайдере отображались необходимые фотографии, необходимо добавить на страницу галерею GL12 и загрузить в неё свои картинки. Далее копируешь их ссылки и вставляешь в генератор в указанные поля. Формат файла советуем использовать svg или png;

• «Ссылка на картинку слева» — Добавляешь ссылку на фотографию, которая будет располагаться слева;
• «Ссылка на картинку справа» — Добавляешь ссылку на фотографию, которая будет располагаться справа;
• «border-radius (px)» — Настраиваешь скругление слайдера. Учитывай, что сильно большой радиус может обрезать подсказки на слайдере;
• «Подпись картинки слева» и «Подпись картинки справа» — Указываем подписи на картинках, если это нужно;
• Настраиваешь цвет и ширину полосы между фотографиями в полях «Цвет полосы» и «Ширина полосы (px)»
• Указываешь в поле хочешь ли ты «Показывать шейп между стрелками?»
• Если да, то настраиваешь «Цвет шейпа и стрелок»
• «Настройки стрелок» — Настраиваешь Размер стрелки, Расстояние от центральной линии, Расстояние от центральной линии при наведении, Скорость анимации при наведении.

2. Копируем сгенерированный код и вставляем у себя в Зеро-блоке в элемент html.
Размеры слайдера будут соответствовать размеру html элемента

Имей в виду:

• Рекомендуем загружать изначально изображения с такими же размерами сторон, как и html элемент внутри зеро блока.
• Рекомендуем загружать векторные изображения не на прозрачном фоне, чтобы избежать наслаивания изображений. Загружайте изображения с таким же цветом фона, как фон блока.