Слайдер-стопка в Tilda: фотографии из GL03 одна за другой

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

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

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

В разделе «Где применять» укажите ID или класс источника. Для выбранной галереи используйте один экземпляр мода, чтобы разные варианты слайдера не пытались перестроить один и тот же блок. После подключения сначала проверьте состав и порядок кадров. Пока это не совпало с ожиданием, сложная глубина и автопрокрутка только затрудняют поиск ошибки.

Выберите самостоятельное размещение и задайте высоту, мобильную высоту и максимальную ширину. Либо включите вставку в шейп Zero Block: назначьте фигуре короткий класс и настройте её размеры в мобильной и настольной вёрстке.

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

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

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

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

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

Включите нужные способы управления и проверьте каждый отдельно. Для стопки доступны свайп, колесо, точки и настройки автопрокрутки. При включённой клавиатуре и курсоре над стопкой стрелка вниз или PageDown переключает вперёд, стрелка вверх или PageUp — назад.

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

Добавьте T123 после источника и принимающего блока, если он есть. Опубликуйте страницу, откройте её на большом экране и телефоне. Перелистайте всю подборку, а не только первый переход.

• Состав и порядок фотографий соответствуют GL03.
• Задние слои и уходящий кадр помещаются в выбранную область.
• Каждый включённый способ управления действительно работает.
• После изменения ширины окна стопка не закрывает соседние тексты.

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

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