Как превратить группы Zero Block в настоящий слайдер
В Zero Block уже есть галерея, но один её слайд — изображение из списка. Если нужно листать целые композиции из текста, кнопки и фигур, элементы придётся сначала объединить в понятные группы, а движение, точки и доступность взять на себя. Не начинайте с анимации: сначала добейтесь, чтобы каждый слайд был самостоятельным, одинаково читаемым и правильно менял высоту секции.
Короткий ответ
Для фотографий используйте родную галерею. Для дизайнерских карточек нужен отдельный слой: группы слайдов, дорожка, управление и пересчёт размеров.
Сначала проверьте простой вариант
Если слайд состоит только из фотографии и подписи можно вынести наружу, родная галерея будет устойчивее. Она знает свои стрелки, точки и события и не требует поддержки пользовательского кода.
Модификация оправдана, когда каждый экран — самостоятельная композиция:
- фотография, заголовок и кнопка;
- карточка тарифа;
- отзыв с аватаром и логотипом;
- несколько элементов с общей анимацией.
Как подготовить макет
Сделайте одинаковое число групп и дайте каждой один служебный класс. Внутри группы оставляйте обычные элементы, но не повторяйте глобальные id. Выберите самый высокий слайд или заранее решите, должна ли высота меняться.
На телефоне предусмотрите свайп и видимый кусок следующей карточки либо точки. Без подсказки горизонтальное действие легко не заметить.
Что обязана делать модификация
Она должна работать с несколькими слайдерами на странице, не ломать ссылки внутри карточек, реагировать на изменение ширины и позволять управлять с клавиатуры. При уменьшении движения перелистывание остаётся, а декоративный переход исчезает.
MOD-108 уже собран: элементы с data-mk-slide становятся доступной scroll-snap
лентой со свайпом, стрелками и клавиатурой. Ссылки внутри слайдов остаются
обычными, а reduced motion убирает плавный переход, но не перелистывание.
Приёмка
Пройдите первый и последний слайд мышью, свайпом и клавиатурой. Проверьте две карусели на одной странице, длинный текст, позднюю загрузку шрифта и поворот телефона. Красивый первый кадр не доказывает, что слайдер работает.