Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте блоки, которые будут переключаться и присвойте им класс .uc-tabs

Если вы планируете использовать несколько табов на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т.д.
Задайте вкладкам в каждом блоке (элементам/группам с типом Object) ссылку #tab

Расположите вкладки в каждом блоке в порядке возрастания. Первой (нижней) вкладке будет соответствовать первый Zero-блок, а последней (верхней) – последний Zero-блок. См. пример
Если вы хотите переключать блоки по кнопкам внутри каждого блока, задайте им ссылки – #next для кнопок «вперёд» и #prev для кнопок «назад»

Если кнопки нужно расположить в блоке, который не должен переключаться, задайте ему класс .uc-tabs-header. Если табов на странице несколько, присвойте им разные классы – .uc-tabs1-header, .uc-tabs2-header и т.д.
Задайте в настройках модификации поведение блоков и их анимацию
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>tabs.init(".uc-tabs", { transition: 0 })</script>

Открыть пример

Пример с автолэйаутом

+

Настройки модификации

Скорость и тип переходов:

Класс блоков со вкладками:

+ Настройки автопереключения

Скорость переключения

Автопереключение вкладок

<!--tabs.js Переключатель Zero-блоков. https://postnikovmd.com/mods/tabs/inline-->
<script>tabs.init(".uc-tabs")</script>

Скопировать код

Особенности

Поддерживает анимации

Базовые и SBS-анимации запускаются при взаимодействии с блоком
Поддерживает автолэйауты

Вкладки будут работать, даже если блок собран полностью в Auto Layout
Комбинируется со слайдером

Позволяет сделать свой слайдер с переключением вкладок. Подробнее

Документация

Элементы

Параметры

Стили

Если вкладка открыта, ей присваивается класс .selected. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
Эти классы можно использовать для кастомизации стилей через CSS.