Tildify
Elements

Слайдер

Это универсальный слайдер: его можно использовать как карусель с несколькими карточками в кадре или как однослайдовый слайдер с переключением экранов по одному.

Как создать в ФигмеКак создать в Тильде
Примеры работы слайдера
Почему это удобно
Если слайдер правильно собран в Figma и размечен тегами, Tildify сам сделает основную работу в Tilda, а тебе останется только проверить структуру и настроить поведение.
Подходит и для карусели с несколькими карточками в кадре, и для классического однослайдового слайдера.
Работает горизонтально и вертикально: направление задается через AutoLayout.
Поддерживает стрелки, точки, счетчики, drag, autoplay и другие настройки.
После добавления в Tilda параметры можно менять через удобную кнопку на панели Tildify Elements.
1. Подготовка к экспорту в Figma
Ниже самый простой и надежный способ собрать слайдер так, чтобы он корректно прошел валидацию и после импорта нормально работал в Tilda.
Для удобного нейминга тегов можно использовать Таггер.
Видеоинструкция: слайдер из Figma
1

Собери содержимое каждого слайда в отдельную группу или frame. Один слайд = один контейнер.

2

Объедини все группы слайдов в один AutoLayout. Это будет общая лента слайдера.

3

Поставь тег [slider] на общий контейнер слайдера, внутри которого лежат все слайды.

4

Убедись, что все слайды являются прямыми дочерними элементами этого контейнера.

5

Направление AutoLayout задает, будет слайдер горизонтальным или вертикальным.

6

Слайдов должно быть минимум два. Если слайд один, слайдер не получится.

7

Ширина или высота видимой области слайдера должна быть меньше, чем общая длина ленты со слайдами. Если все карточки помещаются сразу, листать будет нечего.

8

Если нужны стрелки, подготовь отдельные элементы для кнопки назад и кнопки вперед, чтобы потом назначить им теги [slider-prev] и [slider-next].

9

Если нужен нумератор, подготовь отдельные текстовые элементы для текущего номера и общего количества слайдов. Потом им можно будет задать теги [slider-current] и [slider-total].

10

Если нужны точки, сделай для них отдельный контейнер. Если используешь Shape, нарисуй рядом неактивную и активную точки. Если используешь кнопку, задай ей Hover для активного состояния через набор компонентов. Затем задай контейнеру тег [slider-dots], а точке тег [dot].

11

Экспортируй слайдер в Tilda. Плагин автоматически создаст управляющие скрипты для его работы.

Демо-файл в Figma
2. Как создать в Tilda
Если собираешь слайдер вручную или хочешь проверить импортированный блок, ориентируйся на эту последовательность.
Видеоинструкция: слайдер в Tilda
1

Создай карточки для слайдера и объедини содержимое каждой карточки в отдельную группу типа Object.

2

Задай каждой карточке класс slide.

3

Объедини все карточки в одну общую группу типа Object, включи у нее AutoLayout и задай класс tf_slider.

4

Направление AutoLayout у tf_slider задает тип слайдера: горизонтальный или вертикальный.

5

Настрой gap между карточками и размер видимой области tf_slider. Сколько карточек помещается в эту область, столько и будет видно одновременно.

6

Если на разных брейкпоинтах должно быть разное количество карточек, меняй размер tf_slider отдельно для каждого брейкпоинта.

7

Для кнопки «назад» задай класс tf_slider-prev, для кнопки «вперед» задай tf_slider-next.

8

Для текущего номера страницы используй tf_slider-current, для общего количества страниц используй tf_slider-total.

9

Если делаешь стрелки и нумератор, их можно расположить где удобно относительно слайдера: рядом, сверху, снизу или в разных частях блока.

10

Если нужны точки, нарисуй рядом неактивную и активную точки, если используешь для точек Shape, или сделай точку кнопкой и задай ей свойство Hover для активного состояния через набор компонентов. После этого задай каждой точке класс dot, объедини их в общий контейнер с AutoLayout и задай ему класс tf_slider-dots.

11

Если в одном Zero Block несколько слайдеров, используй общий суффикс у всех связанных классов. Например: tf_slider-1, tf_slider-prev-1, tf_slider-next-1, tf_slider-dots-1, tf_slider-current-1, tf_slider-total-1. Для следующего слайдера используй -2, -3 и так далее.

12

Добавь конфиг слайдера через меню элементов Zero Block.

3. Как это работает при импорте
Если структура собрана правильно, Tildify переносит базовую механику автоматически.
Автоматически добавит нужные классы элементам слайдера.
Автоматически добавит код слайдера и JSON-конфиг в блок.
Если что-то собрано не так, debug-режим подскажет, что именно нужно поправить.
Умный дебагер
Если что-то не работает с первого раза, ориентируйся на умный дебагер. Он помогает быстро понять, чего не хватает в структуре слайдера и какие классы или элементы нужно поправить.
Подскажет, если слайды собраны не в том контейнере или если нарушена структура.
Покажет, если не хватает нужных классов у слайдера, стрелок, точек или нумератора.
Поможет довести блок до рабочего состояния даже если структура сначала собрана неидеально.
4. Теги в Figma
[slider]
Главный контейнер слайдера
Поставь этот тег на сам слайдер. Это главный блок, внутри которого лежат все слайды. Если слайдеров в одном блоке несколько, используй id, например: [slider|id=gallery].
[slider-prev]
Кнопка назад
Поставь этот тег на кнопку, которая должна переключать слайды назад. Если слайдеров несколько, добавь id того слайдера, к которому относится кнопка, например: [slider-prev|id=gallery].
[slider-next]
Кнопка вперед
Поставь этот тег на кнопку, которая должна переключать слайды вперед. Если слайдеров несколько, добавь id, например: [slider-next|id=gallery].
[slider-dots]
Контейнер точек
Поставь этот тег на общий контейнер, в котором лежат все точки навигации. Если слайдеров несколько, используй id, например: [slider-dots|id=gallery].
[dot]
Одна точка
Поставь этот тег на каждую отдельную точку внутри контейнера [slider-dots].
[slider-current]
Текущий номер слайда
Нужен, если рядом со слайдером ты хочешь показывать текущий номер. Если слайдеров несколько, используй id, например: [slider-current|id=gallery].
[slider-total]
Общее число слайдов
Нужен, если рядом со слайдером ты хочешь показывать общее количество слайдов. Если слайдеров несколько, используй id, например: [slider-total|id=gallery].
5. Классы в Tilda
tf_slider
Главный контейнер слайдера
Ставится на элемент, который содержит все слайды. Если слайдеров несколько, используй версию с id, например: tf_slider-gallery.
tf_slider-prev
Кнопка назад
Ставится на кнопку или элемент, который должен листать слайды назад. Если слайдеров несколько, используй класс с id, например: tf_slider-prev-gallery.
tf_slider-next
Кнопка вперед
Ставится на кнопку или элемент, который должен листать слайды вперед. Если слайдеров несколько, используй класс с id, например: tf_slider-next-gallery.
tf_slider-dots
Контейнер точек
Ставится на общий контейнер для всех точек навигации. Если слайдеров несколько, используй класс с id, например: tf_slider-dots-gallery.
dot
Одна точка
Ставится на каждую точку внутри контейнера с классом tf_slider-dots-*.
tf_slider-current
Текущий номер
Ставится на текстовый элемент, где должен показываться текущий номер слайда. Если слайдеров несколько, используй класс с id, например: tf_slider-current-gallery.
tf_slider-total
Общее число слайдов
Ставится на текстовый элемент, где должно показываться общее количество слайдов. Если слайдеров несколько, используй класс с id, например: tf_slider-total-gallery.