Как сделать горизонтальный или вертикальный скролл со стрелками в Зеро блоке на Тильде? ​

Важно:

• Разместите блок с модификацией выше, чем блок с карточками, если скролл в мобильной версии не работает;
• Не используйте формы за пределами скролла, они будут работать некорректно;
• Высота блока со скроллом должна быть фиксированной: Grid Container Height → Fixed. Проверьте это, если на опубликованной странице не видно блок со скроллом.

Для того чтобы настроить смещение элементов нужно заполнить следующие поля:

1. Создайте 2 Зеро блока:

• В первом блоке разместите весь нужный контент и элементы, которые будут скроллиться. Важно: в блоке, где находятся элементы для скроллинга, в настройках блока для параметра «Overflow» нужно указать значение «Auto»;
• Если все элементы в блоке типа image, последний элемент должен быть типа shape (можно добавить прозрачный);
• Во втором блоке разместите контроллеры для скроллинга, например кнопка, шейп или изображение.

2. «id блока в котором двигаются элементы» — В этом поле нужно указать Id блока в котором двигаются элементы;

3. «Выберите вариант ширины сдвига» — В выпадающем списке вам нужно выбрать один из двух вариантов размера шага сдвига:

«Указать в пикселях (px, не работает с autoscale)» — При желании вы можете задать расстояние сдвига самостоятельно для всех популярных разрешений экранов. Для этого раскройте поля для настройки сдвига нажав на ссылку «Настроить фиксированную ширину сдвига, если не выбран шейп». После того как раскроется ссылка, вы сможете заполнить следующие поля:

• «Сдвиг до 320−480px (px)» — Укажите расстояние в пикселях, на которое будут смещаться элементы для мобильных устройств до разрешения 480px;
• «Сдвиг до 481−640px (px)» — Укажите расстояние в пикселях, на которое будут смещаться элементы для мобильных устройств до разрешения 640px;
• «Сдвиг до 641−960px (px)» — Укажите расстояние в пикселях, на которое будут смещаться элементы для планшетов до разрешения 960px;
• «Сдвиг до 961−1200px (px)» — Укажите расстояние в пикселях, на которое будут смещаться элементы для ноутбуков и ПК до разрешения 1200px;
• «Сдвиг больше 1200px (px)» — Укажите расстояние в пикселях, на которое будут смещаться элементы для мониторов от разрешения 1200px;

«Задавать размер сдвига шириной / высотой шейпа (работает с autoscale)» — Эта настройка позволяет выбрать шейп, из которого будет браться ширина/высота для сдвига. Если активировать данную опцию, то появится поле ниже:

• «Класс шейпа у которого брать ширину/высоту (Зависит от направления движения)» — Вы можете придумать класс, который потом сможете применить на шейп. Таким образом ширина и высота шейпа будет определять расстояние сдвига. Например, если я хочу чтобы сдвиг был на 320 px и чтобы между элементами было 20pх, тогда я создам шейп и поставлю ему значение 340px (основное расстояние сдвига + расстояние между элементами). Вы можете сразу задать класс для одного из ваших элементов, чтобы не создавать шейп или чтобы не вводить размеры расстояния вручную. Это удобнее для настройки и работает с автоскейлом.

Важно: Если задаёте размер сдвига шириной шейпа, обязательно добавьте шейпу в блоке со скроллом класс, такой же, как в модификации. Иначе стрелки работать не будут.

4. «Включить движение стрелками» — При активации данной настройки, раскроются следующие поля для классов контроллеров:

• «Класс кнопки влево» — Придумайте класс для контроллера, который смещает элемент влево. Например left. Класс указывается без символов;
• «Класс кнопки вправо» — Придумайте класс для контроллера, который смещает элемент вправо. Например right. Класс указывается без символов;
• «Включить прозрачность стрелок» — Правая стрелка станет полупрозрачной, когда дошли до конца блока, а левая — когда в начале.
• «Непрозрачность фона» — Укажите уровень в процентах для настройки степени приглушения. 0% — полностью прозрачный (невидим), 100% — полностью непрозрачный.

5. Укажите классы для ваших контроллеров. Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе;

6. «Включить перелистывание зеро блока с зажатой мышкой» — Если активировать данную функцию, то элементы можно будет пролистывать с зажатой мышкой. Это альтернативный способ управления скролла элементов. При желании их можно комбинировать;

7. «Направление движения» — Модификация позволяет настроить скроллинг не только по горизонтали, но и по вертикали. Важно, чтобы высота блока была соответствующей высоте всех элементов + расстоянию между элементами;

8. Добавляете блок Т123 и вставляете в него сгенерированный HTML код.

Имейте ввиду:

• Контроллеры для скроллинга, например кнопка, шейп или изображение, выполняющие функцию стрелок, должны находиться в отдельном блоке.
• Прокручивается весь блок целиком, а не отдельные карточки, например, с отзывами.
• Если при горизонтальном скролле на мобильных устройствах блок «гуляет» вверх-вниз, хотя лишних элементов за пределами фрейма нет, попробуйте добавить небольшой отступ сверху и снизу (например, по 1-2 пикселя), если изначально там стоял 0px.
• В модификации нет функции автопролистывания.
• В блоке со скроллом может не работать прокрутка пальцем в мобильной версии или с зажатой мышкой на ПК, если в блоке есть видео.

• Если хотите, чтобы стрелки выглядели как часть одного блока с блоком со скроллом:

- Сделайте у блока со стрелками высоту 0px;
- Установите overflow: visible у этого блока;
- Тогда блок со стрелками наложится поверх блока со скроллом и будет выглядеть как единый блок;
- Дополнительно проверьте z-index, чтобы стрелки показывались сверху. Чем больше цифра, тем выше будет находиться слой. 

• Если хотите добавить фоновое изображение в блок со скроллом:

- Удалите цвет фона как внутри зероблока, так и в настройках блока.
- Фоновое изображение загрузите отдельно и разместите за блоком со скроллом. Для этой задачи подойдет стандартный блок T674, который позволяет добавить изображение к блоку без цвета фона. В тех блоках, где фоновое изображение не нужно, просто используйте цветную заливку.