Tildify Elements
Слайдер для Zero Block
Универсальный слайдер для Tilda ZeroBlock.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Обычный слайдер-карусель
Точки-капсулы
ZeroBlock id:
s05s5kscoe53r2rww4r44
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Слайдер-карусель
Счетчик слайдов
Автопроигрывание
Точки обычные
Бесконечный
Прокрутка колесом мыши
ZeroBlock id:
vbuu6qcgbei1u0gd87besm
/
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один 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 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
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 без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Слайдера
- Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа 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 для удобной настройки параметров с помощью интерфейса настроек.