Горизонтальный скролл со стрелками в Зеро блоке

Важно:

• разместите блок с модификацией выше, чем блок с карточками, если скролл в мобильной версии не работает;
• не используйте формы за пределами скролла, они будут работать некорректно;
• высота блока со скроллом должна быть фиксированной: 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. Класс указывается без символов;

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

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

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

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

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

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