Tildify Elements
Слайдер для Zero Block
Универсальный слайдер для Tilda ZeroBlock.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Параллакс. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Параллакс. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Для использования элементов в Tilda ZeroBlock необходимо установить расширение для Google Chrome Tildify, если нужен импорт из Figma также потребуется плагин для Figma Tildify Validator
Для работы библиотеки необходима платная подписка Tilda, так как в бесплатной недоступно использование скриптов
Ниже приведены примеры слайдеров. Вы можете использовать ZeroBlock id для импорта в ваш проект примера слайдера, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Обычный слайдер-карусель
Точки-капсулы
ZeroBlock id:
s05s5kscoe53r2rww4r44
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Счетчик слайдов
Автопроигрывание
Точки обычные
Бесконечный
Прокрутка колесом мыши
Эффект параллакса
ZeroBlock id:
6tif62pd3540q40ubn150k
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Счетчик слайдов
Точки с масштабом
Зацикленный
Прокрутка колесом мыши
Эффект затухания
ZeroBlock id:
qhnvvtyawhf37qbhxzuhay
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Свои точки
Бесконечный
Настраиваемая скорость
Пресет анимации Grow
ZeroBlock id:
1l5go09g1ythegb6mjcici
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Бесконечный
Настраиваемая скорость
Пресет анимации Space (от 3-х слайдов)
Настраиваемая геометрия боковых карточек
ZeroBlock id:
92wjsqmzvl7hmwhpdblm1r
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Нумерация точек
Шаг страницами
ZeroBlock id:
bt0hc8s6ics62ynv9zgoog
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Нумерация точек
Бесконечный на всю ширину экрана
ZeroBlock id:
7yc2ys2hoiqdn83pdjypr
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Бегущая строка
ZeroBlock id:
wtgobe7qnvduvumaenwh4k
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Плавный
Управление скроллом
ZeroBlock id:
lqyvf34ihbgqp93hkan99a
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Управление скроллом
ZeroBlock id:
o85p95vcqno754s17nr2a5
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой и превью слайдов
Счетчик слайдов
Однослайдовый режим
Режим точек thumbs
ZeroBlock id:
yl3ite3gmopag18v9rtxzi
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой и превью слайдов
Счетчик слайдов
Однослайдовый режим
Режим точек thumbs
ZeroBlock id:
aaztymnaadffsz3ea7l37m
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
ZeroBlock id:
mlzu377vj86y7fntiju63
/
Слайдер с 1 карточкой fullscreen и фиксацией при скролле
Фиксация при скролле
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
ZeroBlock id:
41g5be7de9blzi2p6xemp
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер с 1 карточкой и фиксацией при скролле по центру
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
ZeroBlock id:
f9ku4b1uwtcij1okjo1et
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Связанные слайдеры
Однослайдовый режим
Эффект смены Перетекание
Автоплей
Связанные слайдеры
ZeroBlock id:
usyr9fjo38ekqrkwr2lt
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Вложенные слайдеры
Многослайдовый режим
Однослайдовый режим
Эффект смены Наложение
Управление скроллом
ZeroBlock id:
9ljopehz4pszb0vbrz3afe
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель с разной шириной слайда
Разная ширина
Нумерация точек
Бесконечный на всю ширину экрана
Автоплей
ZeroBlock id:
935n0i5ptp67mym6m7t
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Слайдера
Сборка своего слайдера в Тильде
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Создай карточки для слайдера, для этого объедини содержимое карточек в группы типа Object.
- Задай каждой карточке класс slide, это не обязательное требование.
- Объедини все карточки в одну группу типа Object и задай ей свойство Autolayout и присвой класс tf_slider. Настроив направление Autolayout, можно задать вертикальный или горизонтальный слайдер.
- Настрой gap (расстояние между карточками) и ширину видимой части слайдера tf_slider. Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
- За счет изменения ширины tf_slider можно настроить разное количество карточек на разных брейкпоинтах.
- Задай классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
- Для счетчика текущей страницы слайдера задай класс у текстового поля tf_current, для счетчика общего количества страниц задай класс tf_total
- Добавь точки (страницы), присвой им класс dot
- Объедини точки в общую группу, задай ей свойство Autolayout и задай группе с точками класс tf_slider-dots. Регулируя параметр gap (расстояние) у группы с точками можно задать расстояние между точками. Меняя направление автолэйаута, можно задать выстраивание точек по горизонтали или по вертикали.
- Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
- Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавай имя
- Слайдер: tf_slider-1
- Кнопки: tf_slider-prev-1, tf_slider-next-1
- Точки: tf_slider-dots-1
- Счетчики: tf_current-1, tf_total-1
- Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.
13. Используй панель Tildify Elements для настройки свойств слайдера. Для этого выдели элементы слайдера или конфиг слайдера (блок с кодом и инструкцией), панель управления появится справа на панели настроек Zero Block.
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements
Инструкция для Слайдера
Сборка и экспорт слайдера в Figma
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Собери содержимое каждого слайда в отдельную группу или frame. Один слайд = один контейнер.
- Объедини все группы слайдов в один AutoLayout. Это будет общая лента слайдера.
- Поставь тег [slider] на общий контейнер слайдера, внутри которого лежат все слайды.
- Убедись, что все слайды являются прямыми дочерними элементами этого контейнера.
- Направление AutoLayout задает, будет слайдер горизонтальным или вертикальным.
- Слайдов должно быть минимум два. Если слайд один, слайдер не получится.
- Ширина или высота видимой области слайдера должна быть меньше, чем общая длина ленты со слайдами. Если все карточки помещаются сразу, листать будет нечего.
- Если нужны стрелки, подготовь отдельные элементы для кнопки назад и кнопки вперед, чтобы потом назначить им теги [slider-prev] и [slider-next].
- Для удобного нейминга тегов можно использовать Таггер в плагине.
- Если нужен нумератор, подготовь отдельные текстовые элементы для текущего номера и общего количества слайдов. Потом им можно будет задать теги [slider-current] и [slider-total].
- Если нужны точки, сделай для них отдельный контейнер. Если используешь Shape, нарисуй рядом неактивную и активную точки. Если используешь кнопку из набора компонентов, задай ей Hover для активного состояния через набор компонентов - это будет вид активной точки. Затем задай контейнеру тег [slider-dots], а точке тег [dot]. Можно задать тег только группе точек [slider-dots], плагин предложит задать внутренние точка автоматически.
- Экспортируй слайдер в Tilda. Плагин автоматически создаст управляющие скрипты для его работы.
- После импорта в Tilda используй панель Tildify Elements для настройки свойств слайдера. Для этого выдели элементы слайдера или конфиг слайдера (блок с кодом и инструкцией), панель управления появится справа на панели настроек Zero Block.
Конфиг слайдера появится над артбордом после импорта из Figma
Панель настроек Tildify Elements