Генератор
Настройте скролл
Потащите ряд в превью мышью — так он будет листаться на сайте.
Возможности
Что умеет скролл
Всё настраивается в генераторе, код менять вручную не нужно.
01
Несколько рядов
Один код на все ряды страницы, классы нумеруются сами
02
Только на нужных экранах
Например, на телефонах, а на десктопе остаётся обычная сетка
03
На всю ширину экрана
Лента вырывается из контейнера и тянется от края до края
04
Мышь, свайп и колесо
Перетаскивание, свайп на телефоне, колесо листает вбок
05
Своя полоса прокрутки
Свои цвета полозка и дорожки — или спрятать системную
06
Стрелки
Шаг на карточку, на экран или свой для каждого размера экрана
07
Поведение на краях
Стрелка на краю ряда приглушается или пропадает
08
Анимация-подсказка
Ряд дёргается при загрузке и показывает, что его можно листать
09
Каталог и коллекции
Работает с карточками из CMS Tilda
Установка
Как установить
Работает только с флекс-контейнером: если карточки просто сгруппированы, скролл не заработает.
ЭТАП 01
Соберите флекс
В Zero Block выделите карточки и нажмите Shift + A — они упакуются во флекс-контейнер
1 минута
в Zero Block
в Zero Block
ЭТАП 02
Задайте класс ряду
Контейнеру — класс slider-row, стрелкам — slider-prev и slider-next
по подсказке
генератора
генератора
ЭТАП 03
Вставьте код
Блок T123 (Другое → HTML-код), лучше в самом низу страницы
Ctrl + V
один блок
один блок
ЭТАП 04
Опубликуйте
Скролл работает на опубликованной странице. Обновите её с Ctrl + F5
готово
можно проверять
можно проверять
Ничего не листается
Проверьте, что страница опубликована, класс стоит именно на флекс-контейнере, а код — в блоке T123 на этой же странице.
Карточки сжались в один экран
Включите в генераторе «Класс карточкам» и дайте карточкам класс slider-item. Или задайте карточке фиксированную ширину.
Ряд обрезается краем блока
В настройках Zero Block снимите обрезку содержимого (Overflow).
Лента упирается в край экрана
Положите в конец флекса прозрачный шейп нужной ширины — он листается вместе с карточками.
Стрелки не работают
Их классы должны точно совпадать с теми, что показывает генератор.
Не работает в редакторе Tilda
Так и должно быть: скрипты запускаются только на опубликованной странице.
Дальше
Другие модификации
Все бесплатные, без регистрации.
генератор
Табы в Zero Block
Переключение контента по вкладкам внутри Zero Block
генератор
Слайдер в Zero Block
Слайдер из любых элементов Zero Block, без стандартных блоков Tilda
генератор
Горизонтальный скролл
Секция, которая при прокрутке страницы едет вбок
онлайн
Конвертер в WebP
Сжимает PNG и JPG в WebP прямо в браузере, файлы никуда не загружаются
приложение
NEON-4
Синтезатор в браузере: две партии, драм-машина, секвенсор и уроки
программа
Переключалка
Исправляет текст, набранный не в той раскладке: ghbdtn → привет