Tildify Elements
Слайдер
Универсальный слайдер для Tilda ZeroBlock.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Режим карусели и однослайдовый режим. Гибкая настройка анимации, пресеты анимации. Связанные слайдеры. Управление скроллом. Фиксация при скролле. Настройка контролов.
Поддержка импорта и автогенерации слайдера из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Слайдер-карусель
Обычный слайдер-карусель
Точки-капсулы
Слайдер-карусель
Счетчик слайдов
Автопроигрывание
Точки обычные
Бесконечный
Прокрутка колесом мыши
1
/
1
Слайдер-карусель
Счетчик слайдов
Точки с масштабом
Зацикленыный
Прокрутка колесом мыши
Эффект затухания
1
/
1
Слайдер-карусель
Свои точки
Бесконечный
Настраиваемая скорость
Пресет анимации Grow
Слайдер-карусель
Бесконечный
Настраиваемая скорость
Пресет анимации Space (от 3-х слайдов)
Настраиваемая геометрия боковых карточек
Слайдер-карусель
Нумерация точек
Шаг страницами
Слайдер-карусель
Нумерация точек
Бесконечный на всю ширину экрана
Слайдер-карусель
Бегущая строка
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Плавный
Управление скроллом
1
/
1
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Управление скроллом
1
/
1
Слайдер с 1 карточкой
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
1
/
1
Слайдер с 1 карточкой fullscreen и фиксацией при скролле
Фиксация при скролле
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
Слайдер с 1 карточкой и фиксацией при скролле по центру
Счетчик слайдов
Однослайдовый режим
Эффект смены Наложение
Вертикальный
На мобайле горизонтальный
1
/
1
Связанные слайдеры
Однослайдовый режим
Эффект смены Перетекание
Автоплей
Связанные слайдеры
Вложенные слайдеры
Многослайдовый режим
Однослайдовый режим
Эффект смены Наложение
Управление скроллом
Слайдер-карусель с разной шириной слайда
Разная ширина
Нумерация точек
Бесконечный на всю ширину экрана
Автоплей
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 для удобной настройки параметров с помощью интерфейса настроек.