Блог Perkova&Perkova

Карусель изображений: управление без автоматической гонки

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

Выберите полезную последовательность

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

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

Настройте галерею Zero Block

  1. В Zero Block добавьте Gallery и загрузите подготовленные изображения.
  2. Задайте область галереи и способ Stretch: Cover заполняет её с возможной обрезкой, Contain сохраняет целое изображение.
  3. В Autoplay не задавайте интервал в секундах: по документации в таком случае автоматическая смена не происходит.
  4. Настройте видимые Arrows и Dots для управления.
  5. При желании выберите Slide Speed → None, чтобы смена проходила без анимации.
  6. Заполните индивидуальные подписи и alt слайдов, сохраните и опубликуйте.

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

Проверьте управление

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

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

Клавиатура и альтернативный вариант

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

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

  • Кадры продолжают меняться: проверьте Autoplay и сторонний скрипт.
  • Изображение обрезано: сравните Cover/Contain и размеры области.
  • Стрелки не нажимаются: найдите перекрывающий слой.
  • Подписи не соответствуют кадрам: проверьте индивидуальные настройки слайдов.

Продолжите с уменьшением движения и описанием изображений. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.

2025-06-20 10:00 Практика Tilda