Создайте два Zero-блока: первый со вкладками, второй с кнопками управления и задайте им класс .uc-slider
Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, .uc-slider2 и т.д.
3
Задайте в настройках блока со вкладками параметр overflow: auto
Если в слайдере есть блоки, выходящие по высоте за его границы, поставьте параметр overflow: auto только по оси X
4
Добавьте в слайдер карточки вкладок (шейпы, по которым будут определяться границы слайда) и задайте им класс .slide
5
Добавьте кнопки управления во второй блок. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» — #prev
По-умолчанию неактивные кнопки становятся серыми. Чтобы задать для них свой стиль, пропишите его самостоятельно его через CSS. Неактивной кнопке присваивается класс .inactive — используйте его для настройки состояния.
6
Создайте блоки, которые будут отображаться при нажатии на каждую вкладку и задайте им класс .uc-slider-block
Если вы планируете использовать несколько слайдеров на одной странице, задайте их блокам разные названия классов, оканчивающиеся на -block, например: .uc-slider1-block, .uc-slider2-block и т. д.
Блоки должны располагаться в той же последовательности, в которой заданы сами вкладки. Если они перемешались, скопируйте, удалите и вставьте поочерёдно карточки вкладок в блоке со слайдером
7
Задайте в настройках модификации поведение слайдера и его анимацию
8
Скопируйте код и вставьте его в блок T123 в конец страницы
Видео скоро появится…
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс слайдера:
Зациклить слайдер:
<script>slider.init(".uc-slider")</script>
Скопировать код
Документация
Параметры
Функция;Описание;Триггер
slider.init(selector, params);Инициализирует слайдер;DOM Content Loaded, Window Resize
slider.destroy(selector);Отключает весь функционал слайдера и возвращает блоки до первоначальных настроек;Window Resize
Параметр;Описание;Тип;Значение по-умолчанию
selector;Класс слайдера;string;-
params.arrows;Переключение слайдов по стрелкам;boolean;false
params.select;Переключение слайдов, как вкладок;boolean;false
params.loop;Зацикленное переключение слайдов;boolean;false
params.center;Выравнивание активного слайда по центру;boolean;false
params.drag;Пролистывание слайдера зажатой мышью;boolean;true
params.slides;Класс слайдов в слайдере;string;'.slide'
params.elems;Класс элементов для слайдов;string;'.slide-elem'
params.blocks;Класс блоков для вкладок слайдера;string;selector + '-block'
params.prev;Ссылка для кнопки переключения назад;string;'#prev'
params.next;Ссылка для кнопки переключения вперед;string;'#next'
params.transition;Скорость переключения слайдов;number;300
params.easing;Функция перехода для анимации;string;'ease-in-out'
Модификации для Zero
Оцените сервис
Нравится 100+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете пожертвовать любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку