Модификация позволяет создавать любые слайдеры из 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>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией слайдера. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоит продвинутый слайдер. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой слайдера. Подгружаются асихнронно как функции объекта swiper.
В качестве аргументов для настройки слайдера передаются следующие параметры:
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода.
По умолчанию библиотека автоматически определяет порядок запуска — например, встроить слайдер в поп-ап можно при обычном вызове двух функций. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы:
Запустить слайдер по срабатыванию события
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:
swiper.init(".uc-swiper", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки слайдера
Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события swiperinit-id, где swiperinit – событие отрисовки слайдера, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-slider1, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события 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 в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
