Модификация позволяет создавать полностью кастомные слайдеры из 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-слайдер. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой слайдера. Подгружаются асихнронно как функции объекта slider.
В качестве аргументов для настройки слайдера передаются следующие параметры:
Стили
В params.style можно также передавать стили слайдера и его элементов. Они преобразовываются в css-переменные и отображаются при запуске мода.
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить слайдер по срабатыванию события
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:
slider.init(".uc-slider", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки слайдера
Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события sliderinit-id, где sliderinit – событие отрисовки слайдера, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-slider1, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события sliderinit-id, где sliderinit – событие отрисовки слайдера, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-slider1, то слушатель события добавляется следующим образом:
window.addEventListener("sliderinit-slider1", function(){ /*...*/ })Запустить другую модификацию после отрисовки слайдера
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие sliderinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие 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 при расчете общей ширины слайдера, поэтому, если их больше, чем количество слайдов, после слайдера может оставаться пустое пространство.
Модификация учитывает ширину каждого элемента .slide при расчете общей ширины слайдера, поэтому, если их больше, чем количество слайдов, после слайдера может оставаться пустое пространство.
Размеры слайдов или расстояние между ними отличается
Ширина слайдера рассчитывается, как (ширина слайда + отступ) * количество слайдов, поэтому для его корректной работы важно, чтобы слайды имели одинаковые размеры и располагались на одинаковом расстоянии друг от друга.
Ширина слайдера рассчитывается, как (ширина слайда + отступ) * количество слайдов, поэтому для его корректной работы важно, чтобы слайды имели одинаковые размеры и располагались на одинаковом расстоянии друг от друга.
У слайдов отличается Y-координата
Модификация автоматически определяет порядок слайдов на основании их координат – слева направо и сверху вниз. Если у некоторых слайдов отличается положение относительно верхнего края, слайдер принимает их за второй ряд и не учитывает их при расчёте эффективной ширины.
Модификация автоматически определяет порядок слайдов на основании их координат – слева направо и сверху вниз. Если у некоторых слайдов отличается положение относительно верхнего края, слайдер принимает их за второй ряд и не учитывает их при расчёте эффективной ширины.
Не нажимаются кнопки внутри слайдов
Причина проблемы заключается в том, что по-умолчанию у слайдера включена функция перетаскивания мышью. При нажатии на кнопку возникает коллизия событий – одновременный клик и скролл слайдера, из-за чего кнопки могут не срабатывать. Для решения проблемы отключите перетаскивание мышью в генераторе кода или через параметр drag: false.
Не работают кнопки управления
У данной проблемы есть две возможные причины:
У слайдов отличается Y-координата
Если первый слайд находится ниже остальных, модификация отнесёт его ко второму ряду, и расстояние, необходимое для прокрутки до следующего слайда, станет отрицательным, а значит, слайдер не сможет его пролистать. Для корректной работы кнопок все слайды рекомендуется выровнять по верхнему краю.
Если первый слайд находится ниже остальных, модификация отнесёт его ко второму ряду, и расстояние, необходимое для прокрутки до следующего слайда, станет отрицательным, а значит, слайдер не сможет его пролистать. Для корректной работы кнопок все слайды рекомендуется выровнять по верхнему краю.
В контейнере умещаются все слайды
Если ширина Zero-блока или шейпа .container умещает все слайды целиком, скролл внутри него становится физически невозможным.
Если ширина Zero-блока или шейпа .container умещает все слайды целиком, скролл внутри него становится физически невозможным.
У элементов появляется странная заливка
Элементы, встроенные в шейп, наследуют стили своего контейнера – например, если у шейпа стоит заливка и бордер, его содержимое получит такие же стили. Чтобы избавиться от проблемы, убедитесь, что шейп не содержит никаких настроек, кроме позиционирования и размеров.
Возникает конфликт с другими модами
Zero-слайдер совместим с большинством модификаций из исходной библиотеки. Исключение: вкладки, поп-ап, и аккордеон, которые необходимо запускать через пользовательские события после отрисовки слайдера.
Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать после отрисовки слайдера.
Известные конфликты:
- smoothscroll.js – вызывает дергание слайдера при пролистывании;
- fullpage.js – вызывает сдвиг слайдера и влияет на корректность расчёта его параметров.
Если при установке что-то пошло не так
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=slider, чтобы посмотреть настройки и переменные слайдера. Данные функции работают на любом сайте с установленной библиотекой.