Tildify Elements
Аккордион
Универсальный слайдер для Tilda ZeroBlock.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Аккордион на базе flex-групп
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Гибкая настройка контролов
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
Аккордион на базе обычных групп
Автовысота ZeroBlock
Несколько открытых карточек
Настройка цвета фона активной секции
Компоновка за счет визуальной позици
Tildify Elements
Все примеры собраны на основе одного движка Слайдера Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Слайдера
- Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа 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-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. Настройте параметры слайдера в HTML блоке, или выделите html-блок и нажмите кнопку настроек слайдера в боковом меню Tildify Elements для удобной настройки параметров с помощью интерфейса настроек.