Слайдер из Zero‑блоков

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

Классический слайдер в Zero-блоке

Слайдер с переключением вкладок

Дополнение

Слайдер в любом шейпе Zero-блока

Дополнение

Классический слайдер в Zero-блоке

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

1

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

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

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

1
2

Создайте два Zero-блока: первый со слайдером, второй с кнопками управления и задайте им класс .uc-slider

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

Добавьте в слайдер карточки слайдов (шейпы, по которым будут определяться границы слайда) и задайте им класс .slide
4

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

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

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

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

<script> slider.init(".uc-slider", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) </script>

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

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

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

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

Класс слайдера:

Зациклить слайдер:

+ Настройки стилей

Стрелки

Цвет фона активной стрелки

Бордер активной стрелки

Иконка активной стрелки

Вы можете задать свой стиль для активного состояния стрелок. Они будут указывать на то, что слайдер можно пролистать.

+ Настройки автопроигрывания

Скорость смены слайдов

Автопроигрывание

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

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

Особенности

Управляется стрелками/свайпом

Стрелкам можно задавать стили, которые будут меняться при свайпе
Комбинируется со вкладками

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

Позволяет легко встроить слайдер в любой Zero-блок. Подробнее

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

Элементы

Параметры

Стили

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