СЛАЙДЕРЫ / НАВИГАЦИЯ / TILDA
Слайдер с вкладками из любых блоков
Показывает один из стандартных или Zero-блоков по нажатию вкладки и обновляет ленивую загрузку открытого контента.
Живой пример
Что делает модификация
Показывает один из стандартных или Zero-блоков по нажатию вкладки и обновляет ленивую загрузку открытого контента.
Стандартные блоки TildaСледуйте требованиям в инструкции.
Готовый кодГотовый фрагмент для опубликованной страницы.
Настройки в аккаунтеВыберите параметры и скопируйте результат.
Требования
Проверяйте опубликованную страницу, а не редактор Tilda.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| Класс блоков-слайдов | Выберите значение в интерфейсе личного кабинета. |
| Класс кнопок | Выберите значение в интерфейсе личного кабинета. |
| Фон активной вкладки | Выберите значение в интерфейсе личного кабинета. |
| Текст активной вкладки | Выберите значение в интерфейсе личного кабинета. |
Пошаговая установка
- Создайте навигациюВ Zero Block добавьте кнопки по числу слайдов. Каждой задайте класс tabbtn1; порядок в LAYERS должен соответствовать порядку блоков.
- Подготовьте слайдыПеред или после навигации добавьте любые блоки. Каждому в BLOCK CSS CLASS NAME задайте uc-tab-slider.
- Адаптируйте табыДля мобильных разместите кнопки в Window Container и разрешите X:Auto в POSITION AND OVERFLOW.
- Установите кодВ личном кабинете задайте параметры и нажмите «Сгенерировать код». Вставьте весь результат в T123 после подготовленных блоков. Сохраните и опубликуйте страницу.
- Проверьте содержимоеОткройте все вкладки, проверьте размеры Zero Block и загрузку изображений. Для независимых наборов используйте разные классы и отдельно сгенерированный код.
Важно
Проверяйте опубликованную страницу, а не редактор Tilda.
Частые вопросы
Где менять параметры?
После покупки откройте модификацию в разделе «Покупки». Настройте параметры, нажмите «Сгенерировать код» и замените прежний код на сайте.
Когда появится результат?
После публикации страницы. Проверьте классы, ID и адаптацию блоков. Установите только одну копию кода для одного набора элементов.
Что показывает пример?
Пример демонстрирует механику на элементах LF Code. На вашем сайте используются подготовленные элементы Tilda.