Горизонтальный скролл

Горизонтальный скролл карточек на Tilda

С помощью данной модификации легко и просто настроить любые варианты горизионтального скролла, в том числе анимация карточек по скроллу

Обратите внимание что модификация работает во флекс контейнере. Стрелки можно размещать в блоке с карточками, так и отдельно

Модификация превращает ряд карточек в ленту, которая листается мышкой, свайпом и стрелками. Настройте всё в генераторе выше, скопируйте код и вставьте на страницу.

Работает только с флекс-контейнером. Если карточки просто сгруппированы — скролл не заработает.

Соберите карточки во флекс

В Zero Block выделите все карточки и нажмите Shift + A — они упакуются во флекс-контейнер. Внутри него настройте отступы и ширину карточек как вам нужно: модификация эти настройки не трогает.

Задайте класс ряду

Выделите получившийся контейнер-ряд → панель справа → поле ClassName → впишите класс из генератора, по умолчанию slider-row.

Нужны стрелки — добавьте два элемента (кнопки, шейпы или картинки) и задайте им классы slider-prev и slider-next. Стрелки могут стоять как в блоке с карточками, так и в любом другом.

Вставьте код

Нажмите «Скопировать код» в генераторе. На странице добавьте блок T123 (Другое → HTML-код) — лучше в самом низу — и вставьте код туда. Внутри Zero Block это «+» → Embed → HTML.

Опубликуйте страницу

Код работает только на опубликованной странице. В режиме редактора скролла не видно — это нормально. После публикации обновите страницу с Ctrl + F5.

Шпаргалка по классам

slider-row Контейнер-ряд с карточками. Обязательный.

slider-prev slider-next Стрелки «назад» и «вперёд». Только если включили стрелки.

slider-item Карточка. Нужен, только если карточки сплющиваются в один экран вместо того, чтобы торчать за край.

Если рядов на странице несколько, классы нумеруются: slider-row-1, slider-row-2 и так далее — генератор покажет точные названия.

Полезно знать

Скролл только на мобильных

В настройке «На каких экранах включён скролл» задайте диапазон. Вне его ряд остаётся обычным блоком Tilda — десктопная сетка не ломается.

Лента во всю ширину экрана

Включите «На всю ширину экрана». Если ряд обрезается краем блока — в настройках Zero Block снимите у него обрезку содержимого (Overflow).

Отступ после последней карточки

Положите в конец флекса прозрачный шейп нужной ширины — он листается вместе с карточками и не даёт ленте упираться в край.

Карточки из CMS

Ряд с карточками из Каталога или Коллекций поддерживается: класс ставится на тот же контейнер, вложенную вёрстку скрипт найдёт сам.

Если что-то не работает

Ничего не листается Проверьте, что страница опубликована, класс стоит именно на флекс-контейнере, а код вставлен в блок T123 на этой же странице.

Карточки сжались в один экран Включите в генераторе «Класс карточкам» и задайте карточкам класс slider-item. Либо просто задайте карточке фиксированную ширину.

Стрелки не работают Проверьте классы стрелок — они должны точно совпадать с теми, что показывает генератор.

Не работает в редакторе Tilda Так и должно быть. Скрипты запускаются только на опубликованной странице.