Сколько рядов на странице
Код выдаётся один сразу на все ряды, классы нумеруются: -1, -2 и так далее.
Ряды не мешают друг другу.
Как листается
Ширина ряда
«Как в блоке» — ряд живёт внутри контейнера Tilda и упирается в его края.
«На всю ширину экрана» — вырывается из контейнера и тянется от края окна до края окна,
карточки уезжают за границу экрана. Точный сдвиг считает скрипт, поэтому работает
при любом положении ряда в Zero Block.
Слева останется тот же отступ, что у заголовка и текста блока, — ряд не липнет к краю экрана,
но вправо уходит за границу. Выключено — карточки начинаются вплотную от края окна.
Нужен воздух после последней карточки — положите в конец флекса прозрачный шейп
нужной ширины. Он проскроллится вместе с карточками, и ряд не будет упираться в край экрана.
Если ряд обрезается по краю блока — в Zero Block снимите у него обрезку содержимого
(настройки блока → Overflow / Обрезать контент).
Зажал и потащил. На телефоне свайп работает всегда.
Обычное колесо над рядом перестаёт крутить страницу и листает карточки.
На краю ряда страница снова прокручивается. Shift + колесо листает вбок
и без этой опции — так умеет сам браузер.
Скорость листания колесом ×1.0
Множитель к обычному шагу колеса. ×1 — как у страницы.
Касается стрелок и переходов по ссылкам, не перетаскивания и не колеса.
Серая полоса под карточками обычно выглядит лишней.
Толщина полосы 8px
Нужен, только если карточки сплющиваются в один экран вместо того, чтобы торчать за край.
Если у карточки задана фиксированная ширина — класс не нужен.
Стрелки
Насколько листает стрелка
Шаг считается сам: расстояние между соседними карточками вместе с отступом.
Ничего подставлять не нужно, при смене ширины экрана пересчитается.
Листает почти на всю видимую ширину ряда — как страницами.
Свой шаг для каждого разрешения — ширины стандартные, как в Zero Block.
Удобно, когда карточка на разных экранах разной ширины.
Шаг в пикселях для каждой ширины экрана
Красиво листается, когда шаг равен ширине карточки плюс отступ между карточками.
0 — на этом экране стрелки неактивны (например, когда все карточки и так помещаются).
Стрелка на краю ряда
Прозрачность приглушённой стрелки 35%
Анимация-подсказка
Насколько сдвигается 30px
Задержка перед началом 0.8 с
Сколько раз повторить 2
Подсказка выключается сама, как только посетитель тронул ряд — пальцем, мышью, колесом или стрелкой.
Превью — потащите ряд мышью
Ряд карточек
Классы — проставьте их в Zero Block: выделите элемент → панель справа → ClassName
Нажмите на любое значение, чтобы скопировать его
Ваш код — вставьте в блок T123 (Embed → HTML) в самом низу страницы
Скопировано ✓