2026-07-09 22:48

Продвинутый слайдер в Zero-блоке

Модификации

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

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

10 минут

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

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

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

Продвинутый слайдер работает на основе библиотеки swiper.js. Модификация адаптирует её работу под вёрстку Zero-блока: оборачивает слайды в контейнеры и выстраивает их геометрию на основе размеров и координат, заданных в интерфейсе Тильды. За счёт этого слайдер получает пролистывание, эффекты переключения и другие режимы.

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

В качестве слайдов выступают группы Object с классом .slide. Модификация считывает их положение и размеры, выстраивает по координатам в вёрстке, оборачивает каждый из них в отдельный контейнер .swiper-slide, и затем все слайды — в группы .swiper-wrapper и .swiper, на которых в дальнейшем инициализируется сам слайдер.

Переключение слайдов осуществляется по свайпу или кнопкам #prev/#next. Модификация также поддерживает кастомные элементы управления: точки пагинации .dot, полосу прокрутки .scrollbar/.scrollbar-thumb, и счетчик текущего и общего количества слайдов .current/.total. Их можно расположить в любом месте Zero-блока; для точек пагинации стиль первой из них будет использоваться для отображения активного состояния.

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

Слайдер с пагинацией

Классический вариант, в котором переключение слайдов сопровождается точками пагинации. Подходит, когда слайдов немного и посетителю важно видеть, где он сейчас находится.

Подробнее: Слайдер с пагинацией

Слайдер со скроллбаром

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

Подробнее: Слайдер со скроллбаром

Слайдер с нумерацией

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

Подробнее: Слайдер с нумерацией

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

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

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

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

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

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

Элементы

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

Элемент	Описание	Класс/Ссылка
Слайды*	Группы Object, которые принимаются за слайды. Их количество должно совпадать с количеством физических слайдов в блоке. Все карточки объединяются в общую группу Object, которая выступает обёрткой слайдера: если задать ей overflow: hidden, неактивные слайды будут скрываться за её пределами.	.slide
Точки (пагинация)	Точки, отображающие текущее положение слайдера. Оформление первой точки определяет вид пагинации в активном состоянии. Если в содержимом точки есть число, в неё подставляется номер слайда. Объединяются в общую группу Object.	.dot
Полоса прокрутки (скроллбар)	Фон скроллбара, задающий его границы и размеры. Может быть отдельным шейпом или группой Object с фоновой заливкой.	.scrollbar
Ползунок скроллбара	Элемент, перемещающийся по полосе прокрутки вслед за слайдами. Выравнивается с полосой по левому верхнему краю.	.scrollbar-thumb
Счетчик текущего слайда	Текстовый элемент или кнопка со счётчиком номера активного слайда.	.current
Счётчик количества слайдов	Текстовый элемент или кнопка с общим количеством слайдов. Вместе со счётчиком текущего слайда объединяется в общую группу Object, куда можно добавить разделитель.	.total
Кнопки управления	Элементы, при клике на которые выполняется пролистывание слайдера. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения.	#prev, #next

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

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

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

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

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

Аргумент	Описание	Тип	Значение по-умолчанию
selector	Класс слайдера	string	-
params	Параметры слайдера	object	{}
params.slides	Класс слайдов в слайдере	string	'.slide'
params.dots	Класс точек пагинации	string	'.dot'
params.scrollbar	Класс полосы прокрутки (скроллбара)	string	'.scrollbar'
params.scrollthumb	Класс ползунка прокрутки	string	'.scrollbar-thumb'
params.current	Класс счётчика текущего слайда	string	'.current'
params.total	Класс счётчика общего количества слайдов	string	'.total'
params.prev	Ссылка для кнопки переключения назад	string	'#prev'
params.next	Ссылка для кнопки переключения вперёд	string	'#next'
params.thumbs	Класс для синхронизации слайдера с миниатюрами	string	-
params.infinite	Бесконечное пролистывание слайдов	boolean	false
params.loop	Зацикленное переключение слайдов	boolean	false
params.center	Выравнивание активного слайда по центру	boolean	false
params.ticker	Режим бегущей строки	boolean	false
params.pauseonhover	Останавливать бегущую строку при наведении	boolean	false
params.mousewheel	Переключение слайдов колесиком мыши	boolean	false
params.effect	Эффект переключения слайдов	string	-
params.active	Активный слайд при загрузке страницы	number	0
params.group	Переключение сразу нескольких слайдов	number	1
params.drag	Пролистывание слайдера зажатой мышью	boolean	true
params.autoplay	Автоматическое пролистывание слайдов	boolean	false
params.interval	Интервал автопроигрывания слайдов	number	6000
params.transition	Скорость переключения слайдов	number	300
params.easing	Функция перехода для анимации	string	'ease-in-out'
params.event	Пользовательское событие для запуска слайдера	string	-
params.timeout	Задержка после срабатывания события	number	0
params.style	Стили слайдера	object	{}
params.style.controls.backgroundColor	Цвет фона активной стрелки	string	'#FFFFFF'
params.style.controls.borderColor	Цвет бордера активной стрелки	string	'#FFFFFF'
params.style.controls.backgroundImage	Иконка активной стрелки	string	'https://...'

События

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

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

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

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

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

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

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

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

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

<!--swiper.js Продвинутый слайдер в Zero-блоке. https://postnikovmd.com/mods/swiper-->
<script>swiper.init(".uc-swiper")</script>

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

Продвинутый слайдер с пагинацией

Базовый вариант продвинутого слайдера. В Zero-блок с классом .uc-swiper добавляются слайды .slide, точки пагинации .dot и кнопки #prev и #next. Вид активной точки повторяет оформление первой из них, а стили стрелок в активном состоянии настраиваются в генераторе кода:

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

Пример: Продвинутый слайдер с пагинацией

Слайдер с полосой прокрутки

Аналог слайдера с пагинацией, в котором вместо точек используется полоса прокрутки .scrollbar с ползунком .scrollbar-thumb, объединёнными в группу Object. Модификация подхватывает их сама, поэтому код инициализации аналогичен базовому варианту:

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

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

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

Вариант слайдера, в котором текущее положение отражает не пагинация, а счётчик, состоящий из элементов .current и .total, объединённых в группу Object. Между ними можно добавить разделитель — он подставится в счётчик автоматически. Дополнительных параметров такой слайдер не требует:

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

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

Слайдер с нумерацией

Слайдер с пагинацией, точки .dot которого содержат номера слайдов. Если внутри точки есть число, модификация подставит в него порядковый номер. Вёрстка и код инициализации совпадают с базовым примером:

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

Пример: Слайдер с нумерацией

Бесконечный слайдер

Пример реализации слайдера, который листается по кругу, без остановки на последнем слайде. Верстается и настраивается так же, как и слайдер с пагинацией, но в код инициализации добавляется параметр infinite: true:

<script>swiper.init(".uc-swiper", { infinite: true })</script>

Пример: Бесконечный слайдер

Дополнительно: бесконечное пролистывание и зацикливание — разные настройки; если задать одновременно infinite и loop, сработает только infinite.

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

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

<script>swiper.init(".uc-swiper", { center: true })</script>

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

Слайдер с 3D-эффектом

Слайдер, в котором карточки переключаются с 3D-трансформацией — эффектом Coverflow. Задаётся параметром effect: "coverflow":

<script>swiper.init(".uc-swiper", { effect: "coverflow" })</script>

Пример: Слайдер с 3D-эффектом

Слайдер-бегущая строка

Пример, в котором слайды непрерывно движутся в одну сторону, создавая эффект бегущей строки. Данный режим включается параметром ticker: true:

<script>swiper.init(".uc-swiper", { ticker: true, interval: 6000, pauseonhover: true })</script>

Пример: Слайдер-бегущая строка

Примечание: ticker сам зацикливает слайдер и включает автопроигрывание, поэтому отдельно их задавать не нужно. Скорость движения регулирует interval, а pauseonhover: true останавливает ленту при наведении курсора.

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

Слайдер во всплывающем окне можно реализовать двумя способами: с помощью блока T1093 или модификации кастомных поп-апов в Zero-блоке.

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

При использовании отдельной модификации для поп-апов, обоим блокам задаётся одинаковый класс, и в блок T123 со слайдером добавляется ещё один код с инициализацией.

<script>swiper.init(".uc-swiper")</script>
<script>popup.init(".uc-swiper", { animation: "zoom", style: { blur: 4 } })</script>

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

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

Попробовать

Zero-слайдер