Время настройки: 5 минут

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

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

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

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

Дополнение

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

Дополнение

Классический Zero‑слайдер

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

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

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

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

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

Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, .uc-slider2 и т. д.
Добавьте в слайдер карточки слайдов (элементы/группы с типом Object) и задайте им класс .slide

В качестве карточек можно использовать как отдельные шейпы/изображения/др., так и группы с типом Object. Важно — количество элементов с классом .slide должно совпадать с количеством самих слайдов в блоке.
Добавьте кнопки управления во второй блок. Для кнопки «вперёд» задайте ссылку #next, для кнопки «назад» — #prev

Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º.
Задайте в настройках модификации параметры поведения слайдера и его анимацию
Скопируйте код и вставьте его в блок T123 в конец страницы

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

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

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

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

+

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

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

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

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

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

Отображать слайды по центру

Отключить перетаскивание мышью

Слайдер

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

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

Включить автопроигрывание

Если включено, активный слайд будет выравниваться по центру экрана

Если включено, слайдер будет возвращаться в начало при пролистывании до последнего слайда

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

Стрелки

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

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

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

Слайды

Непрозрачность неактивных слайдов

Размытие неактивных слайдов

Размер активного слайда

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

Примечание: выбранная опция не влияет на расположение соседних слайдов.
См. пример

Позволяет задать свою иконку для стрелок в активном состоянии.

Примечание: для того, чтобы у кнопки «назад» иконка отображалась корректно, задайте ей такое же изображение, что и для кнопки «вперёд», и поверните её на 180º в настройках элемента

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

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

Особенности

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

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

Слайдер будет работать, даже если блок сделан полностью в Auto Layout
Можно встроить в любой шейп

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

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

Элементы

Параметры

Стили

Активному слайдам и его элементам присваивается класс .active. Слайдам, находящимся в поле видимости, присваивается класс .visible. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно. Используйте эти классы для кастомизации стилей через CSS.