Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
Создайте блоки, которые будут переключаться и присвойте им класс .uc-tabs
Если вы планируете использовать несколько табов на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т.д.
Задайте вкладкам в каждом блоке (элементам/группам с типом Object) ссылку #tab
Расположите вкладки в каждом блоке в порядке возрастания. Первой (нижней) вкладке будет соответствовать первый Zero-блок, а последней (верхней) – последний Zero-блок. См. пример
Если вы хотите переключать блоки по кнопкам внутри каждого блока, задайте им ссылки – #next для кнопок «вперёд» и #prev для кнопок «назад»
Если кнопки нужно расположить в блоке, который не должен переключаться, задайте ему класс .uc-tabs-header. Если табов на странице несколько, присвойте им разные классы – .uc-tabs1-header, .uc-tabs2-header и т.д.
Задайте в настройках модификации поведение блоков и их анимацию
Скопируйте код и вставьте его в блок T123 в конец страницы
selector;Класс блока с содержимым вкладок;string;-
params.header;Класс блока со вкладками;string;selector + '-header'
params.footer;Класс блока с кнопками управления;string;selector + '-footer
params.tabs;Ссылка для вкладок;string;'#tab'
params.elems;Класс элементов для вкладок;string;'.tab-elem'
params.prev;Ссылка для кнопки «Назад»;string;'#prev'
params.next;Ссылка для кнопки «Вперёд»;string;'#next'
params.slide;Номер активного слайда;number;0
params.hover;Переключение вкладок по наведении;boolean;false
params.transition;Скорость переключения вкладок в миллисекундах;number;300
params.easing;Функция перехода для анимации;string;'ease-in-out'
params.autoplay;Автоматическое переключение вкладок;boolean;false
params.interval;Интервал переключения вкладок;number;6000
Стили
Параметр;Описание;Тип;Пример
params.style.active.backgroundColor;Цвет фона активной вкладки;string;'#FFFFFF'
params.style.active.borderColor;Цвет бордера активной вкладки;string;'#FFFFFF'
params.style.active.opacity;Непрозрачность неактивных вкладок;number;0.2
params.style.controls.backgroundColor;Цвет текста активной стрелки;string;'#FFFFFF'
params.style.controls.borderColor;Цвет бордера активной стрелки;string;'#FFFFFF'
params.style.controls.backgroundImage;Иконка активной стрелки;string;'https://...'
Если вкладка открыта, ей присваивается класс .selected. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно. Эти классы можно использовать для кастомизации стилей через CSS.
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку