Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь

+16

Максим Постников

hello@postnikovmd.com

Политика Конфиденциальности

+16

Главная
→
Модификации
→
Zero-вкладки
→
Время настройки: 2 минуты

Вкладки из Zero-блоков

Позволяет создавать кастомные табы из Zero-блоков — с активными вкладками, управлением кнопками и настраиваемой анимацией

Табы с вкладками и управлением стрелками

Переключатель Zero-блоков по кнопкам

Дополнение

Переключатель Zero-блоков по кнопкам

Инструкция по установке

1

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

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

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/tabs.min.js"></script>

1
2

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

Если вы планируете использовать несколько табов на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т.д.
3

Добавьте кнопки управления в каждый блок. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» – #prev
4

Если вы хотите переключать блоки по вкладкам, добавьте их в каждый блок и задайте им ссылку #tab

Первой созданной вкладке в каждом блоке будет соответствовать первый Zero-блок. Если вкладки перемешались, попробуйте их скопировать, удалить и вставить заново – в том порядке, в котором стоят соответствующие им блоки
5

Задайте в настройках модификации поведение блоков и их анимацию
6

Скопируйте код и вставьте его в блок T123 в конец страницы

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

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/tabs.min.js"></script>
<script>tabs.init(".uc-tabs", { transition: 0 })</script>

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

Видео скоро появится…

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

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

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

<script>tabs.init(".uc-tabs")</script>

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

Особенности

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

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

По табам можно переключать как стандартные, так и Zero-блоки
Комбинируется со слайдером

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

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

Элементы

Параметры

Стили

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

Чат для дизайнеров

Вместе всё получится

3 000+ человек

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Можете меня поблагодарить

Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Обо мне

Проекты

Блог

Связаться

Модификации

Максим Постников

Сообщить об ошибке

Политика Конфиденциальности

Столкнулись с ошибкой?

Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно

Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram

Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram

Расскажите подробнее о проблеме, при которой модификация работает неправильно

Сообщение отправлено

Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время

Нравятся модификации?

Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше

Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше

Сообщение отправлено

Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис