Слайдеры Тильды показывают картинки и карточки товаров, но не произвольную вёрстку. А в Zero-блоке можно нарисовать что угодно — только листать эти блоки нельзя. Модификация связывает одно с другим: вы перечисляете ID блоков, и они собираются в слайдер на библиотеке Swiper.
Что настраивается
- Порядок слайдов — тем, в каком порядке вы перечислили ID блоков.
- Сколько слайдов видно отдельно на компьютере, планшете и телефоне, и расстояние между ними.
- Перелистывание: сдвиг, затухание, карточки или карусель, длительность, бесконечная прокрутка.
- Автопрокрутка с паузой между слайдами и остановкой, когда посетитель листает сам.
- Стрелки и указатель слайдов: точки, номер слайда или полоса прогресса, с настройкой цвета и размера.
- Всё остальное из документации Swiper — отдельным полем в формате JSON.
Что учтено
- Zero-блоки не дублируются. В бесконечной прокрутке Swiper переставляет настоящие слайды, а не клонирует их, поэтому одинаковых ID на странице не появляется и Zero не ломается.
- Слайдер собирается только после отрисовки блоков, а сразу после сборки каждый блок пересчитывается штатной функцией Тильды — размеры и масштаб остаются правильными.
- Если библиотека не загрузилась, страница не ломается: блоки остаются на своих местах обычным списком.
- Картинки в соседних слайдах догружаются при перелистывании.
- Слайдер листается с клавиатуры, у стрелок есть подписи для скринридеров, а при системной настройке «уменьшить движение» перелистывание мгновенное.
Ограничение
Zero-блок рассчитан на всю ширину окна, поэтому больше одного слайда на экране имеет смысл только для блоков, специально нарисованных узкими. По умолчанию показывается один слайд.
Некодим