Loading...
О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа
Блог
Шаблоны
NLM127 ВРЕМЯ НАСТРОЙКИ: 1 МИНУТА

ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ СО СТРЕЛКАМИ В зеро блоке

Модификация позволяет скроллить элементы в зеро блоке с помощью кнопок или перетаскивания мышкой. В генераторе модификации вы можете настроить блок с элементами, для скролла элементов по горизонтали и по вертикали.
Для корректной работы модификации включите поддержку jQuery. Подробнее.
Как это сделать: Настройка сайта > Еще > Подключить jQuery на страницах сайта.
Важно:
  • разместите блок с модификацией выше, чем блок с карточками, если скролл в мобильной версии не работает;
  • не используйте формы за пределами скролла, они будут работать некорректно.

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

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 код.

Имейте ввиду:
  • Контроллеры для скроллинга, например кнопка, шейп или изображение, выполняющие функцию стрелок, должны находиться в отдельном блоке.
Поддержка без выходных
Бесплатный доступ
0₽
/месяц
Доступен ограниченный функционал
Плагин для Тильды
Закрытые эфиры
+140 модификаций
Скидка 25% на курсы
Обновление модификаций и доступ к новым
+120 модификаций
Скидка 25% на курсы
Обновление модификаций и доступ к новым
Базовая
500₽
/месяц
Для решения краткосрочных задач
Год
Месяц
Плагин для Тильды
Поддержка без выходных
Закрытые эфиры
чтобы скопировать код, ОФОРМИТЕ ПОДПИСКУ или ВОЙДИТЕ в личный кабинет
Плагин для Тильды
Поддержка без выходных
+140 модификаций
Премиум
250₽
/месяц
Экономия 3000₽ в год
Год
Месяц
Скидка 25% на курсы
Обновление модификаций и доступ к новым
Закрытые эфиры
Все пользователи, оформившие Премиум-подписку, получают доступ к дополнительным разделам: «Интернет-магазин» и «Личный кабинет».

В этих разделах представлены различные модификации, которые не доступны тем, кто оформил месячную подписку.
Все пользователи, оформившие Премиум-подписку, могут воспользоваться 25% скидкой на все курсы и гайды Академии Нолим.
Все пользователи, оформившие Премиум-подписку, могут посещать закрытые мероприятия, на которые мы приглашаем ведущих экспертов рынка.

На этих встречах они делятся своим опытом, что открывает новые горизонты для всех участников.
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, чтобы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Предыдущий
Следующий
Горизонтальный
Вертикальный