3D-карусель Coverflow в Tilda: центральное фото и объёмные края

У Coverflow один снимок стоит по центру, а соседние уходят в стороны под углом. Такой вид подходит для обложек проектов, коллекции постеров или небольшой подборки работ: сразу понятно, какой слайд выбран и куда можно листать.

Источником фотографий остаётся обычный GL03. Мод меняет способ показа, а порядок и состав изображений вы продолжаете редактировать в галерее Tilda.

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

В поле «Где применять» выберите ID или класс этого блока. Один и тот же GL03 не стоит одновременно превращать в несколько разных галерей. Обратите внимание на повторы: одинаковые адреса изображений объединяются, поэтому повторная вставка одного файла не всегда создаёт ещё один отдельный слайд. Для проверки состава используйте разные изображения.

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

Если карусель нужна внутри Zero Block, включите соответствующий режим. Назначьте принимающему шейпу короткий CSS-класс и укажите его в конструкторе. Размеры этой фигуры задайте в Tilda для нужных экранов. Область должна вмещать не только центральную фотографию, но и боковые карточки с управлением. Проверяйте реальные границы фигуры, а не только её видимое оформление.

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

Проверьте разные кадры: светлую обложку, тёмную фотографию и изображение с мелкими деталями. Отражение включается отдельно и не нужно для работы карусели. Если оно отвлекает от самих проектов или занимает слишком много высоты, оставьте его выключенным. Лучше ясно показать одну работу, чем одновременно продемонстрировать все настройки объёма.

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

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

На телефоне ширина уменьшается, но карусели по-прежнему нужно место для поворота и смены карточек. Задайте мобильную высоту и проверьте крайние положения. Снимок должен оставаться различимым, а стрелки — попадать в доступную область.

Если карусель вставлена в шейп, сверьте и размеры самого шейпа в мобильной версии Zero. Настройка высоты в конструкторе не заменяет проверку принимающей области. Перелистайте всю подборку пальцем и попробуйте прокрутить страницу рядом с галереей: оба действия должны быть понятны без долгого поиска нужного жеста.

Добавьте код в T123 после GL03 и принимающего блока, если используете вставку в Zero. Опубликуйте страницу и откройте её по обычному адресу. Проверяйте каждый способ управления отдельно, чтобы случайная автосмена не скрыла неработающую стрелку.

• В карусели есть все ожидаемые уникальные изображения.
• Боковые карточки и отражение помещаются в выбранную область.
• Собственные стрелки загружаются и переключают в нужную сторону.
• После изменения ширины окна центральный слайд и управление остаются на месте.

Читайте также: Слайдер в Tilda: как выбрать и настроить подходящий вариант · Галерея как в Pinterest на Tilda: сетка и увеличение фото.