Слайдер в Tilda: как выбрать и настроить подходящий вариант

«Сделать слайдер в Тильде» — это несколько разных задач. Иногда нужно перелистывать фотографии внутри одного экрана. Иногда — превратить готовые карточки в горизонтальную ленту. А иногда — получить свободное перетаскивание с инерцией, как у карусели в приложении. От этого выбора зависит и блок-источник, и способ подключения.

В этом гайде разберём три подхода и подробно пройдём настройку инерционного слайдера GL03. Он подходит для портфолио, интерьерных подборок и фотосерий, где посетителю удобно самостоятельно выбирать темп просмотра.

Нужна обычная галерея фотографий в авторской композиции? Начните с элемента «Галерея» в Zero Block. В нём доступны изображения, стрелки, точки, циклическое переключение и автопроигрывание. Это разумная отправная точка, если задача решается настройками самого элемента.

Уже есть стандартные карточки с текстом и кнопками? Выбирайте решение для конкретного типа карточек. У нас есть отдельный мод слайдера из стандартных блоков. Проверьте поддерживаемые блоки в его инструкции: одинаковый внешний вид карточек ещё не означает одинаковую внутреннюю разметку.

Нужна фотолента, которая продолжает двигаться после отпускания мыши? Для этого предназначен инерционный слайдер из GL03. Его источник — именно галерея GL03. Он не превращает произвольные карточки товаров или любой Zero Block в слайды.

Начинайте с самого простого варианта, который закрывает задачу. Дополнительная механика оправдана, когда она помогает рассмотреть работы или управлять длинной подборкой. Для двух изображений сложная лента часто избыточна.

Мод добавляет горизонтальное перетаскивание с инерцией и настраиваемым поведением на краях. Можно включить привязку к кадрам, бесконечное движение, автопрокрутку, стрелки, точки или индикатор прогресса. Подписи берутся из выбранного источника галереи.

Полезно разделять две механики. Инерция отвечает за движение после жеста. Привязка к кадру — за положение, в котором лента останавливается. Для свободной подборки можно оставить мягкое перемещение; для последовательного просмотра работ — добавить остановку по кадрам.

Если нужен центральный крупный кадр и наклон соседних изображений, посмотрите GL03 Coverflow. Это другой визуальный сценарий. Не подключайте оба мода к одному исходному блоку одновременно.

1. Добавьте GL03 и загрузите фотографии. Сначала проверьте состав и порядок изображений, подписи и качество файлов. Подготовленный источник упрощает дальнейшую настройку.
2. Откройте конструктор мода. В поле «Где применять» укажите ID нужного блока или его CSS-класс. Селектор должен указывать на эту галерею, а не на соседнюю секцию страницы.
3. Задайте геометрию. Начните с ширины кадров, расстояния между ними и высоты. Отдельно настройте высоту для телефона. Так вы сначала получите читаемую композицию, а уже затем добавите движение.
4. Выберите поведение. Включите нужную инерцию, сопротивление на краях и привязку. Зацикливание и автопрокрутку добавляйте только при необходимости.
5. Настройте управление. Выберите стрелки, точки или прогресс. Проверьте отдельную настройку стрелок на мобильных: скрытая на телефоне навигация не должна делать галерею непонятной.
6. Скопируйте готовый код в T123 после исходных блоков и опубликуйте страницу. Движение проверяйте на опубликованном сайте: превью конструктора показывает схему, но не заменяет проверку реального поведения.

Доступ к конструктору GL03 относится к тарифу Pro dsgnmax. Актуальные условия и подключение находятся на странице мода. Настройки самой Tilda и подписка на модификации — отдельные вещи.

Если фотолента должна находиться внутри сложной композиции, подготовьте в Zero Block Shape-контейнер и назначьте ему отдельный CSS-класс. В конструкторе выберите режим размещения в Zero и укажите этот контейнер. Исходные фотографии по-прежнему берутся из GL03.

Затем настройте размеры Shape на каждом нужном разрешении. Если контейнер становится слишком низким, кадры или элементы управления могут не поместиться. Если его ширина выходит за экран, проблема останется и после подключения слайдера.

Такой подход удобен, когда рядом с галереей расположены подпись проекта, номер работы или кнопка заявки. Саму композицию вы редактируете в Zero Block, а поведение фотоленты — в конструкторе мода. Не путайте этот вариант со встроенным элементом «Галерея»: у них разные источники и настройки.

Откройте страницу на реальном телефоне. Кадр должен быть достаточно крупным, чтобы понять изображение, но не занимать всю высоту экрана вместе с заголовком и навигацией. Проверьте вертикальные и горизонтальные фотографии: одинаковая высота не гарантирует удачное кадрирование.

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

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

Галерея осталась обычной. Проверьте выбранный тип блока, точность ID или класса, положение T123 и факт публикации последних изменений. Откройте опубликованный адрес заново, чтобы исключить старую версию страницы.

Появились рывки или двойное управление. Посмотрите, не подключён ли второй слайдер к тому же GL03. Сгенерированный код загружает необходимые компоненты GSAP; дополнительные подключения и старые обработчики могут конфликтовать. На копии страницы оставьте один управляющий мод и проверьте результат.

В Zero Block часть галереи обрезана. Сверьте контейнер, его класс и размеры на текущем разрешении. Проверьте, хватает ли места кадрам и навигации. Не пытайтесь компенсировать ошибку контейнера увеличением скорости или изменением инерции.

На компьютере всё хорошо, а на телефоне неудобно. Пересмотрите мобильную высоту, размер кадров, отступы и видимость стрелок. Настройки большого экрана — только отправная точка для мобильной версии.

• В ленте правильные изображения и подписи; важные детали не обрезаны.
• Работают перетаскивание мышью, свайп и выбранные элементы навигации.
• У первой и последней фотографии предсказуемое поведение; зацикливание включено осознанно.
• После нескольких движений страница по-прежнему нормально прокручивается.
• На одном GL03 работает один мод слайдера.
• На телефоне помещаются и фотографии, и управление.

Если нужен не просмотр кадров, а непрерывный поток карточек или логотипов, используйте другой сценарий — бегущую строку в Tilda. Для неё важны повторяемость ленты, читаемость карточек и возможность остановить движение.