Документация — модификации для Zero-блоков

2025-08-11 22:56

Слайдер в Zero-блоке

Модификации

Zero-слайдер

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

10 минут

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

Как работает модификация

Общие механики

Слайдер основан на механике горизонтального скролла, который применяется к Zero-блоку или отдельному шейпу внутри него. В качестве слайдов могут выступать как отдельные шейпы, так и группы Object с классом .slide.

Для определения области прокрутки вычисляются положение, размеры и отступы слайдов, после в контейнере создаётся прозрачный шейп, который определяет границы слайдера и область, которая будет прокручиваться. При наличии автоскейла его размеры умножаются на коэффициент масштабирования.

Свайп, перемещение зажатой кнопкой мыши или нажатие на кнопки вперёд/назад вызывает функцию горизонтального скролла слайдера. Скорость прокрутки регулируется параметрами transition и easing, заданными в настройках модификации.

После завершения прокрутки на основании координат и степени смещения слайдера, определяются слайды, попадающие в область видимости. Активному слайду присваивается класс .active, видимым слайдам – класс .visible.

Изменение размеров экрана перезапускает отрисовку слайдера: он разбирается до первоначального состояния и собирается заново с учетом новых координат и настроек элементов.

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

Слайдер, в котором областью прокрутки является весь Zero-блок – вне зависимости от того, каким элементам задан класс .slide, скроллиться вместе со слайдами будут все остальные элементы.

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

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

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

Слайдер, у которого при нажатии на каждый слайд или пролистывая до него скрываются/появляются соответствующие ему блоки. Данную вариацию слайдера можно использовать для создания кастомных табов, когда их количество больше, чем можно уместить на экран.

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

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

Слайдер, встроенный внутрь шейпа в Zero-блоке. Работает так же, как и классический слайдер, но позволяет ограничить видимую область контейнера или расположить контент в этом же блоке.

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

Начало работы

Установка библиотеки

Для работы слайдера необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.

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

Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией слайдера. Подробнее: Синхронизация обновлений в модификациях

Дальнейшая настройка производится по инструкции к каждому из вариантов:

Элементы

Ниже приведены элементы, из которых состоит Zero-слайдер. Они задаются и настраиваются в интерфейсе Тильды.

Элемент	Описание	Класс/Ссылка
Слайды*	Элементы, которые принимаются за слайды и учитываются при расчёте ширины слайдера и других его параметров. В качестве них можно использовать шейпы или группы Object, при этом их количество должно совпадать с количеством физических слайдов в блоке. Если шейп находится внутри группы Object, то в качестве слайда будет приниматься именно она. Модификация автоматически определяет порядок слайдов на основании координат, заданных в Тильде, игнорируя расположение в слоях: ранжирование выполняется слева направо, сверху вниз. Активному слайду присваивается класс .active, слайдам, находящимся в поле видимости – класс .visible.	.slide
Кнопки	Элементы, при клике на которые выполняется пролистывание слайдера. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.	#prev, #next
Контейнер	Шейп, в который встраивается слайдер. Не должен иметь никаких настроек, кроме положения и размеров, чтобы слайды не наследовали его стили. Перед встраиванием в контейнер слайды необходимо объединить в общую группу Object.	.container
Доп. элементы	Любые элементы, имеющие привязку к слайдам и наследующие его классы. Используются в случае, когда необходимо переключать состояние не только слайдов, но и сопутствующих им элементов. Чувствительны к расположению в слоях и количеству – должны располагаться непосредственно перед каждым слайдом, а их количество должно быть кратно количеству самих слайдов.	.slide-elem

* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой слайдера. Подгружаются асихнронно как функции объекта slider.

Функция	Описание	Триггер
slider.init(selector, params)	Инициализирует отрисовку слайдера	DOMContentLoaded, Window Resize
slider.destroy(selector)	Отключает слайдер и возвращает блоки до первоначальных настроек	Window Resize
slider.scrollTo(selector, params, index)	Пролистывает слайдер до слайда index	-

В качестве аргументов для настройки слайдера передаются следующие параметры:

Аргумент	Описание	Тип	Значение по-умолчанию
selector	Класс слайдера	string	-
params	Параметры слайдера	object	{}
params.loop	Зацикленное переключение слайдов	boolean	false
params.center	Выравнивание активного слайда по центру	boolean	false
params.drag	Пролистывание слайдера зажатой мышью	boolean	true
params.active	Активный слайд при загрузке страницы	number	0
params.slides	Класс слайдов в слайдере	string	'.slide'
params.elems	Класс элементов для слайдов	string	'.slide-elem'
params.blocks	Класс блоков для вкладок слайдера	string	selector + '-block'
params.prev	Ссылка для кнопки переключения назад	string	'#prev'
params.next	Ссылка для кнопки переключения вперед	string	'#next'
params.container	Класс шейпа для вставки слайдера	string	'.container'
params.transition	Скорость переключения слайдов	number	300
params.easing	Функция перехода для анимации	string	'ease-in-out'
params.autoplay	Автоматическое проигрывание слайдов	boolean	false
params.interval	Интервал автопроигрывания слайдов	number	6000
params.event	Пользовательское событие для запуска слайдера	string	-
params.timeout	Задержка после срабатывания события	number	0
params.style	Стили слайдера	object	{}
index	Номер слайда для прокрутки	number	0

Стили

В params.style можно также передавать стили слайдера и его элементов. Они преобразовываются в css-переменные и отображаются при запуске мода.

Параметр	Описание	Тип	Пример
active.backgroundColor	Цвет фона активного слайда	string	'#FFFFFF'
active.borderColor	Цвет бордера активного слайда	string	'#FFFFFF'
active.scale	Масштабирование активного слайда	number	1.2
visible.opacity	Непрозрачность видимых слайдов	number	0.2
visible.blur	Размытие видимых слайдов	number	4
visible.grayscale	Ч/б эффект для видимых слайдов	number	0
inactive.opacity	Непрозрачность неактивных слайдов	number	0.2
inactive.blur	Размытие неактивных слайдов	number	4
inactive.grayscale	Ч/б эффект для неактивных слайдов	number	1
inactive.scale	Масштабирование неактивных слайдов	number	0.8
controls.backgroundColor	Цвет текста активной стрелки	string	'#FFFFFF'
controls.borderColor	Цвет бордера активной стрелки	string	'#FFFFFF'
controls.backgroundImage	Иконка активной стрелки	string	'https://...'

События

Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:

Запустить слайдер по срабатыванию события
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:

slider.init(".uc-slider", { event: "customEvent", timeout: 100 })

Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".

Запустить сторонний код после отрисовки слайдера
Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события sliderinit-id, где sliderinit – событие отрисовки слайдера, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-slider1, то слушатель события добавляется следующим образом:

window.addEventListener("sliderinit-slider1", function(){ /*...*/ })

Запустить другую модификацию после отрисовки слайдера
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие sliderinit:

tabs.init(".uc-slider", { event: "sliderinit-slider" })

Инициализация

Код инициализации слайдера вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:

<!--slider.js Слайдер в Zero-блоке. https://postnikovmd.com/mods/slider-->
<script>slider.init(".uc-slider")</script>

Примеры использования

Классический слайдер со стрелками

Создаётся два Zero-блока с классом .uc-slider – в первый добавляются слайды .slide, а во второй – кнопки #prev и #next. По желанию можно настроить их стили в генераторе кода:

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

Пример: Классический слайдер со стрелками

Слайдер с автолэйаутом

Аналог классического слайдера, свёрстанный с использованием автолэйаута. Каждый слайд – flex-группа с классом .slide, расположенная внутри Zero-блока с автолэйаутом. Такой слайдер визуально не отличим от классического , но добавлять слайды в интерфейсе намного удобнее.

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

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

Слайдер с центрированием

Вариант классического слайдера, в котором center: true сдвигает слайды так, чтобы активный находился по центру экрана. Верстается как классический слайдер или слайдер с автолэйаутом.

<script>slider.init(".uc-slider", { center: true, loop: true, active: 2, style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" }, active: { scale: 1.2 }, visible: { opacity: .6 }, inactive: { opacity: .6 } } })</script>

Пример: Слайдер с центрированием

Дополнительно: В примере установили зацикливание слайдера через loop: true, сделали третий слайд активным по-умолчанию и задали масштабирование и непрозрачность для неактивных слайдов.

Слайдер по Window-контейнеру

Тот же классический слайдер, адаптированный под вёрстку в Window-контейнере. По-умолчанию модификация работает через Grid, поэтому для корректного расчета смещения просто указываем в коде параметр bind: "window".

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

Пример: Слайдер по Window-контейнеру

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

Классический слайдер с классом .uc-slider, слайдами .slide и кнопками #prev и #next, после которого размещаются переключаемые блоки с классом .uc-slider-block.

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

Для того, чтобы логотип и кнопка изменяли свои стили в активном состоянии так же, как и подложка, задаем им отдельные классы .slide-img и .slide-arrow, указываем их в параметре elems и прописываем дополнительный CSS для их стилизации, используя класс .active.

<style>
    /* Задаём стили для логотипов и стрелок на карточках */
    .uc-slider .slide-img .tn-atom {
        opacity: .3 !important; /* Задаём неактивному логотипу непрозрачность 30%*/
    }
    
    .uc-slider .slide-img.active .tn-atom {
        opacity: 1 !important; /* Делаем активный логотип полностью непрозрачным */
        filter: invert(1); /* Инвертируем цвета логотипа для тёмного фона */
    }
    
    .uc-slider .slide-arrow.active .tn-atom {
        background-color: #7366FF !important; /* Перекрашиваем фон активной кнопки со стрелкой */
        background-image: url(https://static.postnikovmd.com/mods/arrow-diagonal-down-w.svg) !important; /* Загружаем своё изображение для активной стрелки */
    }
</style>

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

Слайдер с сохранением активной вкладки

Практически полный аналог слайдера с переключением вкладок, но с добавлением параметра hash: true. Благодаря нему при переходе по вкладкам в адресной строке будет сохраняться ссылка на активную вкладку.

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

Пример: Слайдер с сохранением активной вкладки

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

Верстается как обычный слайдер, затем всё его содержимое объединяется в группу Object и помещается в прозрачный шейп с классом .container.

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

В данном примере включили автоматическое пролистывание слайдов через autoplay: true, что также зациклило его переключение.

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

Вертикальный слайдер

Аналогично горизонтальному слайдеру в шейпе, размещаем слайды вертикально и добавляем параметр vertical: true в код инициализации.

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

Пример: Вертикальный слайдер

Слайдер внутри Zero-вкладок

Если слайдер находится внутри Zero-вкладок, которые должны переключаться, то запускать их необходимо только после полной его отрисовки. Добавляем пользовательское событие sliderinit в код инициализации табов.

<!--Инициализируем слайдер-->
<script>slider.init(".uc-slider")</script>

<!--Отслеживаем инициализацию слайдера и запускаем вкладки-->
<script>tabs.init(".uc-tabs", { event: "sliderinit-slider" })</script>

Пример: Слайдер внутри Zero-вкладок

Если во вкладках находится несколько слайдеров, то запускать табы необходимо только после полной их инициализации. Для этого в параметре event необходимо указать все пользовательские события sliderinit через запятую.

<!--Инициализируем слайдеры-->
<script>slider.init(".uc-slider1")</script>
<script>slider.init(".uc-slider2")</script>
<script>slider.init(".uc-slider3")</script>

<!--Отслеживаем инициализацию всех слайдеров и запускаем вкладки-->
<script>tabs.init(".uc-tabs", { event: "sliderinit-slider1, sliderinit-slider2, sliderinit-slider3" })</script>

Несколько слайдеров в одном блоке

Чтобы добавить несколько слайдеров в один блок, необходимо задать слайдам, кнопкам и их контейнерам разные классы и указать их в коде инициализации:

Слайдам: .slide1 и .slide2;
Кнопкам «Назад»: #prev1 и #prev2;
Кнопкам «Вперёд»: #next1 и #next2;
Контейнерам: .container1 и .container2.

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

<script>slider.init(".uc-slider", { slides: ".slide1", prev: "#prev1", next: "#next1", container: ".container1" }) </script>
<script>slider.init(".uc-slider", { slides: ".slide2", prev: "#prev2", next: "#next2", container: ".container2" }) </script>

Пример: Несколько слайдеров в одном блоке

Слайдер в поп-апе

Слайдер, открывающийся во всплывающем окне, настраивается с помощью модификации кастомных поп-апов в Zero-блоке. После отрисовки необходимо встроить слайдер в стандартный поп-ап BF503 с помощью события sliderinit.

<!--Инициализируем слайдер-->
<script>slider.init(".uc-slider")</script>

<!--Отслеживаем инициализацию слайдера и запускаем поп-ап-->
<script>popup.init(".uc-slider", { event: "sliderinit-slider" })</script>

Пример: Слайдер в поп-апе

Распространенные проблемы

Пустое пространство после слайдера

Наиболее распространённая проблема, которая может возникать по нескольким причинам:

Количество элементов с классом .slide превышает количество самих слайдов в блоке
Модификация учитывает ширину каждого элемента .slide при расчете общей ширины слайдера, поэтому, если их больше, чем количество слайдов, после слайдера может оставаться пустое пространство.

Размеры слайдов или расстояние между ними отличается
Ширина слайдера рассчитывается, как (ширина слайда + отступ) * количество слайдов, поэтому для его корректной работы важно, чтобы слайды имели одинаковые размеры и располагались на одинаковом расстоянии друг от друга.

У слайдов отличается Y-координата
Модификация автоматически определяет порядок слайдов на основании их координат – слева направо и сверху вниз. Если у некоторых слайдов отличается положение относительно верхнего края, слайдер принимает их за второй ряд и не учитывает их при расчёте эффективной ширины.

Не нажимаются кнопки внутри слайдов

Причина проблемы заключается в том, что по-умолчанию у слайдера включена функция перетаскивания мышью. При нажатии на кнопку возникает коллизия событий – одновременный клик и скролл слайдера, из-за чего кнопки могут не срабатывать. Для решения проблемы отключите перетаскивание мышью в генераторе кода или через параметр drag: false.

Не работают кнопки управления

У данной проблемы есть две возможные причины:

У слайдов отличается Y-координата
Если первый слайд находится ниже остальных, модификация отнесёт его ко второму ряду, и расстояние, необходимое для прокрутки до следующего слайда, станет отрицательным, а значит, слайдер не сможет его пролистать. Для корректной работы кнопок все слайды рекомендуется выровнять по верхнему краю.

В контейнере умещаются все слайды
Если ширина Zero-блока или шейпа .container умещает все слайды целиком, скролл внутри него становится физически невозможным.

У элементов появляется странная заливка

Элементы, встроенные в шейп, наследуют стили своего контейнера – например, если у шейпа стоит заливка и бордер, его содержимое получит такие же стили. Чтобы избавиться от проблемы, убедитесь, что шейп не содержит никаких настроек, кроме позиционирования и размеров.

Возникает конфликт с другими модами

Zero-слайдер совместим с большинством модификаций из исходной библиотеки. Исключение: вкладки, поп-ап, и аккордеон, которые необходимо запускать через пользовательские события после отрисовки слайдера.

Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать после отрисовки слайдера.

Известные конфликты:

smoothscroll.js – вызывает дергание слайдера при пролистывании;
fullpage.js – вызывает сдвиг слайдера и влияет на корректность расчёта его параметров.

Если модификация все равно не работает

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=slider, чтобы посмотреть настройки и переменные слайдера. Данные функции работают на любом сайте с установленной библиотекой.

Попробовать

Zero-слайдер